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 understandingsi nce #main isn't floated, #middle should expand to accomodate it (although...
crazeway
Last Activity: Feb 17 '08, 04:15 PM
Joined: Feb 14 '08
Location:
-
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
...Leave a comment:
-
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...Leave a comment:
-
different browsers have different default paddings for certain elements. I like to start my css with * {margin: 0; padding: 0;} to avoid these cross-browser inconsistencies . Add this and see if it fixes the problem.
or try removing the margin-top: 3px from your h1 styleLeave a comment:
-
probably the padding on <h1>Biography </h1>. I've had this problem in Firefox beforeLeave a comment:
-
css layout- nested div margins effect the containing div
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
[CODE=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">...
No activity results to display
Leave a comment: