CODEWITHSUNDEEP
htmlcss
Mia
Mia

Reputation: 6531

Display: inline and float: Left

I'm trying to create a container item that will include two type of elements: item and text. The logic should be like this:

Please have a look at my fiddle: http://jsfiddle.net/BZw4A/

And here is the used hierarchy:

<div id="container">
    <div class="text bg">This is only a sample text to show the weird problem about 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 from the fiddle, because of the width-value of the container, the background of the text element seems like block instead of inline. The only way I could find was to remove these lines:

float: left;
clear: both;

When I remove these lines, the text background goes back to how I want it to be, however, the buttons lose their order (because of inline) and show up on the same line just like normal text.

I'd love to hear some solutions to this problem which was mainly based on these typography issues.

Upvotes: 1

Views: 281

Answers (2)

Jeff-Meadows
Jeff-Meadows

Reputation: 2184

You can change your markup to indicate that each item should be on its own line (the <div>s) and then style the content inside an inline element.

<div id="container">
    <div class="text"><span class="bg">This is only a sample text to show the weird problem about inline text and background.</span></div>
    <div class="item"><span class="bg">Item One</span></div>
    <div class="item"><span class="bg">Item Two</span></div>
    <div class="item"><span class="bg">Item Three</span></div>
    <div class="item"><span class="bg">Item Four</span></div>
    <div class="item"><span class="bg">Item Five</span></div>
</div>

Then you won't need the float/clear css at all.

Example: http://jsfiddle.net/BZw4A/3/

Upvotes: 1

Blender
Blender

Reputation: 298176

It's a little hacky, but you can use :after to make a line break element:

.bg:after {
    content: '';
    display: block;
}

Demo: http://jsfiddle.net/BZw4A/4/

Upvotes: 1

Related Questions