CODEWITHSUNDEEP
htmlcss
josh
josh

Reputation: 251

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

link: http://jsbin.com/iladi4/3

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.

Upvotes: 1

Views: 524

Answers (4)

Ammi J Embry
Ammi J Embry

Reputation: 637

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.

Upvotes: 0

svk
svk

Reputation: 4553

Add float:left in #header See the Demo

Upvotes: 0

Brad Mace
Brad Mace

Reputation: 27926

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.

Upvotes: 0

David Thomas
David Thomas

Reputation: 253506

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

Upvotes: 2

Related Questions