how to have border in a div that contains two other divs

tags:

css
html

views:

answers:

+1 Q:

how to have border in a div that contains two other divs

I am working on a html page where I have a header div that contains two sub div's

I want to have a bottom-border for the header div but that border always keeps going on top. I want the border to be at the bottom.

Please see the link.

+2 A:

Add overflow: hidden to the #header. Demo at: JS Bin.

David Thomas 2010-10-18 04:29:00

great. this works. i cant accept answer yet ...have to wait 9 more minutes. but can you explain why overflow is needed?

josh 2010-10-18 04:31:26

Because, once floated, the two `div`s are removed from the document's flow which causes the parent `div` (`#header`) to be empty. Using `overflow: hidden` forces the `#header` to wrap around the floated elements.

David Thomas 2010-10-18 04:33:01

@Josh, did this answer your question in the end?

David Thomas 2010-10-18 17:34:32

This is happening because the inner divs aren't actually in #header. By floating them you've removed them from the normal layout. Floating #header will fix that problem but may require other tweaks to get what you want.

bemace 2010-10-18 04:29:41

Just had a look at the example in @vinothkumar's answer - this forces the div to appear on the left hand side. I think @David Thomas got the correct answer - I cant explain why `overflow: hidden` would cause this though.

ClarkeyBoy 2010-10-18 06:20:07

Add float:left in #header See the Demo

vinothkumar 2010-10-18 04:31:53

You could also add a div below the nav div with style="clear: both;" this isn't pretty, but it works if for some reason you can't use either of the other two suggestions.

Nicknameless 2010-10-18 19:11:55

ansaurus

tags:

views:

answers:

how to have border in a div that contains two other divs

related questions