0

I have this page: http://jsfiddle.net/minitech/yU3aj/show/

If you look in the source, the CSS defines that the <header> should have side padding of 135px on each side, and the content should have 135px margin on each side. Why does the content end up having double that in spacing?

What I see

Ry-
  • 218,210
  • 55
  • 464
  • 476
  • 1
    I don't understand/can't replicate what you mean by "double that in spacing". They both look correct to me. – Alastair Pitts Jun 29 '11 at 23:28
  • 6
    That design looks strangely familiar.. :) – thirtydot Jun 29 '11 at 23:29
  • http://stackoverflow.com/questions/5013683/css-float-and-padding "When you float an element, it's effectively taking it out of the document flow, so padding won't have an effect on it." – Mark McLaren Jun 29 '11 at 23:33
  • @Alastair: I added a picture... @thirtydot: I thought so too, but I'm having trouble putting my finger on it... :) – Ry- Jun 29 '11 at 23:33

2 Answers2

2

It doesn't. You're floating elements in the <header> and not clearing them.

Add clear: both; to your styles for the content div and it will move below the header and to the left.

Brent
  • 2,961
  • 1
  • 17
  • 18
0

It looks fine on my screen (Firefox 5.0)

Though I've read that some old IE versions have a problem called double margin

Also make sure to put a clearfix div after those two child elements in <header>:

<header>   
  <div id="notifications" class="left">notifications</div>
  <div class="right">
    <a href="account.aspx" id="userinfo"><span class="dropdown">▾</span> username</a>
  </div>
  <div style="clear: both;"></div>
</header>

EDIT: after checking out your screenshot it's obvious that you're missing that clearing div and the content below "floats after" your notifications box. Usually it is considered to be good practice to put a clearing element at the end of the floated elements, this way forcing the container to expand and "cover" all the contained elements.

Matyas
  • 13,473
  • 3
  • 60
  • 73