I'm attempting to design a container element that will contain two types of content: items and text. The structure should follow these guidelines:
Background always styled with inline display (with line-breaks for background instead of blocks);
List items displayed separately.
Please take a look at my code example on JSFiddle: http://jsfiddle.net/BZw4A/
The hierarchy I used is as follows:
<div id="container">
<div class="text bg">This is just a sample text to demonstrate the issue with inline text and background.</div>
<div class="item bg">Item One</div>
<div class="item bg">Item Two</div>
<div class="item bg">Item Three</div>
<div class="item bg">Item Four</div>
<div class="item bg">Item Five</div>
</div>
As you can see in the fiddle, due to the width setting of the container, the background of the text element appears like a block rather than inline. The only solution I found was to remove these lines:
float: left;
clear: both;
When those lines are removed, the text background reverts to the desired style, but the items lose their alignment (due to the inline formatting) and appear on the same line like regular text.
I would appreciate any suggestions for solving this issue, which primarily revolves around typographic concerns.