Home/ Questions/Q 8943213
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T11:43:07+00:00

Why is it that the content div stretches to include the menu nav in

  • 0

Why is it that the content div stretches to include the menu nav in this fiddle? http://jsfiddle.net/kePCS/

If I remove the float property on nav it doesn’t. Since the nav width is set to 100% it still seems to be the same size when i inspect it.

I have to have it floated afaik. It’s an integral part of this menu that im using http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

But i still don’t want the nav to sit on top of content that should be below. Do you know any workaround? I wouldn’t mind an explanation as to why this happens either. I thought since they were both 100% width they wouldn’t overlap. Obviously i was wrong. Thanks!

Won’t let me post without code, but the fiddle will be easier to understand.

#menu {
float:left;
width:100%;
}
#content{
width:100%;
background-color:#5FC0CE;
}​
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Floating the content will work, but I personally wouldn’t. This is because floating tends to be the source of many IE bugs, and has some more subtle implications that might come back to bite you later.

    There’s not necessarily a right or wrong way to do this; however, I would instead add a “clear:both;” to #content, which will prevent it from bleeding up into the nav.

    • 0