My Divs are not containing

[AbydosGater]

Hey guys.. Im a complete noob when it gets to CSS so i dont know whats wrong here.

 

If you look at www.abydosgaters.com/bad

See how when the main div with the content closes after "X categorys listed"... The whole div closes but the menu div keeps going and it messes up and looks bad.

 

Does anyone know how i could edit the css or html so that the main content div doesnt close until the menu div closes?

 

Andy

[dbrimlow]

You have a broken link to your css file. I get no styling at all when I try to view the page.

[AbydosGater]

My bad sooo sorry. Fixing that now.

 

EDIT: Fixed... could you take a look please?

[moberemk]

Add this at the end of your content div:

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

[AbydosGater]

Aw man you are a life saver! Works perfectly!

 

Thank you so much!

 

Andy

[bronzemonkey]

Don't use:

 

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

 

That won't work in all situations and browsers...it is also not semantic xhtml markup. Someone in these forums pointed me to the best method for clearing floats:

 

http://www.positioniseverything.net/easyclearing.html

 

I've seen some well known sites aren't bothering with the IE-mac hack and are managing to further reduce their markup by avoiding the addition of a "clearfix" class to the xhtml. Your stylesheet would contain something like:

 

#content:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

[moberemk]

Huh. I'd forgotten about that little trick, actually-thanks for the reminder.

[AbydosGater]

Yay thanks guy. ill test that out when i get this dam server to boot.

[TheFilmGod]

About the clear: both and the "hack" way of doing it...

 

Well, after writing up my own pages in css for about month now, I can see why that helps. But what I do, is I have the next block do "clear: both;" and then have no margin-top set but instead, have padding-top set. This works just fine in opera, firefox and IE6.