By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,487 Members | 1,067 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,487 IT Pros & Developers. It's quick & easy.

css layout- nested div margins effect the containing div

P: 6
The top margin of a nested div (#main) is pulling down its containing div (#middle) along with the 2 floated divs flanking it. This problem corrects itself and gives me the desired effect if I add a border to #middle. However I'd like to understand the problem and do away with the border. Here is a test page I made to illustrate my problem

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.  
  3. <html>
  4. <head>
  5. <style>
  6. #wrap {width: 900px;}
  7.  
  8. #head {
  9. background: green;
  10.            height: 60px;}
  11.  
  12. #middle {background: blue;
  13.         height: 800px;
  14.         }
  15.  
  16. #left {
  17.     float: left;
  18.     width: 100px;
  19.     background: purple;
  20.     height: 600px;
  21.     }
  22.  
  23. #right {
  24.     float: right;
  25.     width: 100px;
  26.     background: red;
  27.     height: 600px;
  28.     }
  29.  
  30. #main {
  31.     margin: 60px 110px 0 110px;
  32.     background: orange;
  33.     height: 700px;
  34.     }
  35.  
  36. #foot {background: green;
  37.         height: 60px;
  38.         }
  39. </style>
  40. </head>
  41. <body>
  42. <div id="wrap">
  43.     <div id="head"></div>
  44.     <div id="middle">
  45.         <div id="left"></div>
  46.         <div id="right"></div>
  47.         <div id="main"></div>
  48.     </div>
  49.     <div id="foot"></div>
  50. </div>
  51. </body>
  52. </html>
Feb 14 '08 #1
Share this Question
Share on Google+
10 Replies


drhowarddrfine
Expert 5K+
P: 7,435
I'm trying to go to bed.

Always remember that parent elements are never to expand to contain their floated elements. IE does this but it's a bug. In any case, adding 'overflow:auto' to #middle causes it to expand to contain these elements that "overflow" it.

I'd explain more as to why it's happening there but I'm literally woozy. Hope you see it so I don't have to go through it again in the morning. :)
Feb 14 '08 #2

P: 6
I dont see how #main, #left or #right are overflowing #middle. #left and #right have defined widths of 100px, are floated and so they do not overflow #middle. With #main having left and right margins of 110px, it winds up between the two floats, its width then being determined by the width of #wrap and also does not overflow #middle. Even heightwise, #main with its additional 60px top margin is still shorter than #middle.

I also don't see how adding a border would correct the problem if it was due to overflow.
Feb 14 '08 #3

Death Slaught
100+
P: 1,137
It's your 'main' division. Its margin-top is pushing your header division up. Using overflow:auto; like drhowarddrfine said will fix your problem because your main division top margin is overflowing your middle division. Your over option would be to remove the top margin in your 'main' division. So here are your two options:

Remove space and keep margin.

Expand|Select|Wrap|Line Numbers
  1. #middle {
  2.   background: blue;
  3.   height: 800px;
  4.   overflow:auto;
  5. }
Remove space and margin.

Expand|Select|Wrap|Line Numbers
  1. #main {
  2.   margin: 0px 110px 0 110px;
  3.   background: orange;
  4.   height: 700px;
  5. }
Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")
Feb 14 '08 #4

P: 6
Thanks for the fix. I do want the 60px margin, making #main lower than the floats. Even though it works, I still don't understand why. Can someone explain why overflow is necessary here. I would expect it to render the way it does without overflow if I had given a 60px margin-top to #middle, not #main. I'm not understanding why #main's 60px margin-top does not begin at the top edge of #middle, since #main is nested in #middle

curiously enough, I just looked at this page in ie6 and it renders the way I want without overflow
Feb 14 '08 #5

drhowarddrfine
Expert 5K+
P: 7,435
It renders the way you want but you are witnessing an IE bug. Parent elements are never to expand to contain floated elements. So overflow is required by modern browsers so the box expands to contain an element "overflowing" out of itself.
Feb 14 '08 #6

drhowarddrfine
Expert 5K+
P: 7,435
For example, insert an image into the markup below and view in Firefox and IE. This is typical of what might be found on the web. It doesn't work in IE. (Find an image to insert instead of "1.png")
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
img{float:left}
</style>
</head>

<body>

<p><img src="1.png">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean auctor consectetuer sem. Proin quis nisl venenatis neque consectetuer tincidunt. Fusce quis nibh non diam imperdiet facilisis. Pellentesque vitae mauris. Phasellus scelerisque arcu sed purus. Ut at enim. Mauris ornare, sem vel lacinia condimentum, augue lorem molestie orci, vel rhoncus lorem sem ut risus. Cras venenatis adipiscing ipsum. Proin eros. Proin id est. Sed eu arcu quis arcu faucibus congue. Cras congue sapien vel purus. Duis mi quam, tristique non, imperdiet non, rhoncus et, nunc. Sed nisl.
</p>

</body>
</html>[/HTML]
Feb 14 '08 #7

P: 6
I understand how floats and their container's expansion works and why overflow is necessary in that situation. I think I am describing a different question, but maybe I'm not seeing the relation. I'm not trying to give props to ie or anything like that. The problem occurs in Opera, Safari, Firefox, and I haven't yet tried ie7.

Based on my understandingsince #main isn't floated, #middle should expand to accomodate it (although this is not even an issue since I gave #middle a height bigger than #main.)

My Main Problem
What perplexes me is why the margin-top of #main does not start at the top edge of #middle, since #main is nested in #middle (and not floated)

or, put another way

why does adding a border to #middle suddenly make #main's margin-top start at the top edge of #middle, where without it, it seems to transfer its margin-top property to #middle
Feb 14 '08 #8

drhowarddrfine
Expert 5K+
P: 7,435
Some things are just best left unsaid. You don't have a right to know these things. Is that your momma callin'? I believe it is. You better git home now. But I think it's best to not breath a word of this. Ya never know who's listenin'. And ya' don't wanna get hurt...ya' know?

But seriously follks......

The margin is there but it's poking out the top. Why it's doing that I haven't discovered yet. For some reason, it's acting like there are floats or abs pos elements. I thought it might be connected to the order of placement of the floats but moving them around didn't change anything.

I'm not stumped. I just need to take some more time to look into this.

Did you say this happens in all browsers but IE?
Feb 15 '08 #9

drhowarddrfine
Expert 5K+
P: 7,435
Ok, problem solved. I was focused too much on the floats. I can't remember the rule that guides this but the margin for #main is sticking out of the containing box. Maybe that's what you know and are saying. I just need to look at the rule regarding that. I'm sure it's related to collapsing margins.
Feb 15 '08 #10

drhowarddrfine
Expert 5K+
P: 7,435
Yep. This gets me every time if I'm not thinking about it. Collapsing margins. . The relation between the parent/child elements where the child can pass through the parent element.
Feb 15 '08 #11

Post your reply

Sign in to post your reply or Sign up for a free account.