2 replies [Last post]
Anonymous
Anonymous's picture
Guru
calgary,alberta
calgary,alberta

Simple coding....

<div style="padding-left: 5px;background-color: yellow;">
<span style="float:left; width: 400px;">Topics</span>
<span style="float:left; width: 50px;text-align:center;">Posts</span>
<span style="float:left; width: 150px;">Started by</span>
<span style="float:left; width: 80px;text-align:center;">Last Post</span>
</div>

Shouldn't this create a yellow stripe across the back of the SPANs? I can't
get it to work, unless I remove the "float:left;" specification. Any clues
how to make this work?

--Brent

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 7 years 18 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Float:left &amp; background

Give the original DIV some height, or add a spacer div/span at the end:

<div style="clear: both;"></div>

As there's nothing actually in the original DIV some browsers won't show it. Getting rid of the float does put stuff into the div and gives it some height. The clear creates a div that is below all floats, and here it'll be inside the yellow div, giving it a reasonable height.

Hope that helps!

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

Anonymous
Anonymous's picture
Guru

At last!

This, indeed, does help! Finally the div shows a background color. Thanks for your help!

--Brent