Anyone know common causes of this? (HTML/CSS problem)

BigglesPiP · 28 Jun 2008 at 22:45

I have one big div, 800px wide, and the height unset.

In it there are 2 more divs:
-One 188px wide set to float right, it's height is unset and it just sits as high as its content.
-One 600px wide, no float, just sits on the left, again as high as its content.

The problem is:

In Firefox and Opera (IE is fine), the big div will only take its height from the 600px wide div, and not the 188px wide right floating div. so that when the right floating div is longer it spills out and looks all ugly:

Anyone know how to make the big div take orders from the right floating one?

Ignore the other bugs in the wordpress design, these I can manage myself.

Sic · 29 Jun 2008 at 00:20

try putting a wrapper div around the non floated and floated div, setting its overflow to hidden and floating the non-floated div left. make sure your DTD is Strict so that IE obeys the overflow declaration, if it doesn't, set clear: both on your footer.

BigglesPiP · 29 Jun 2008 at 01:23

Bingo, thanks for that, overflow: hidden; worked.

It worked before floating the unfloated div left, any reason I should?

probedb · 29 Jun 2008 at 22:14

Technically, the floated divs don't take up any space in their container or something like that.

Try searching for 'clearfix' in google.

BigglesPiP · 30 Jun 2008 at 01:45

Thanks again for the help, I've finally finished my blog theme http://blog.iamtheb.org

Still needs a couple of tweaks to get it through W3C validation tho, something I'll do later.

Edit:

Actually I could do with some help on that, I don't see what's wrong with my <ul> and <li> tags.

http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0

Code:

<ul>
     <li class="sidebartitle">Blog controls</li>
     <ul class="sidebarelement">
          <li><a href="http://blog.iamtheb.org" title="All blog posts.">Blog Home</a></li>
     </ul>
     <br />
     <li class="sidebartitle">Categories</li>
     <ul class="sidebarelement">
          <li class="cat-item cat-item-3"><a href="http://blog.iamtheb.org/?cat=3" title="All sorts of useless rubbish.">General Insanity</a> (1)</li>
          <li class="cat-item cat-item-6"><a href="http://blog.iamtheb.org/?cat=6" title="View all posts filed under Preview">Preview</a> (1)</li>
          <li class="cat-item cat-item-4"><a href="http://blog.iamtheb.org/?cat=4" title="Something has wee'd me off.">Rant</a> (1)</li>
     </ul>
     <br />
     <li class="sidebartitle">Archives</li>
     <ul class="sidebarelement">
          <li><a href='http://blog.iamtheb.org/?m=200806' title='June 2008'>June 2008</a></li>
     </ul>
</ul>