8

I have set up some divs for my layout, a main div and a menu div.

They look perfect in Firefox, but for some reason, Chrome and Safari get messed up.

For some reason the width of the div gets smaller when overflow:hidden; is added to the CSS. I need overflow:hidden; though, because I have other floats inside the main div. You can see the example here:

http://jsfiddle.net/kR7rs/2/

It shows up fine in Firefox, but in Safari and Chrome, there's a margin on the right side of the div as well.

Rob
  • 1,865
  • 1
  • 14
  • 26

2 Answers2

3

Removing the margin from main seems to fix it:

http://jsfiddle.net/kR7rs/3/

What I think it happening is that when overflow:hidden is set, the entire element wraps around the floats instead of the text within the div. So this gives the result in the fiddle. Then if you set a margin on it also, the width is decreased further by the left padding.

Kind of seems like a bug.

(Don't have FF right now to test it and see if it breaks it for FF.)

James Montagne
  • 77,516
  • 14
  • 110
  • 130
  • So overflow:hidden basically makes a block element squeeze as wide as it can without overflowing to any floats on the same line? Your solution seems to be working.. it just seems so odd to have a div on the same line as a float without any margin – Rob Aug 08 '11 at 21:26
  • I don't think i realized that would do that, but it appears to be the case. – James Montagne Aug 08 '11 at 21:29
1

Move overflow:hidden to #wrapper. That fixes it, but doesn't explain why.

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
  • I want to make sure my main div wraps around the floats inside it, though. That's why I put the `overflow:hidden` in there – Rob Aug 08 '11 at 21:19