- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hi,
I find myself in this unusual place of debugging Chrome & Safari. They usually work for me with no problems.
The problem is with my main div collapsing. Works fine in FF, IE8< & Opera
Header Stuff
Stuff
SideStuff
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; display:inline;}
header {display:block;}
#main {display:block;height:100%; width:954px; padding:18px 0 20px; background:#fff;}
#content {position:relative;display:block;width:636px;margin:0;padding:12px;float:left;}
#sidebar {position:relative;display:block;width:276px;margin:0;padding:12px 0 12px 12px;float:right;}
footer {display:block;clear:both;}
Has anyone come up against this problem before or have any suggestions.
I have since added display:block to the .clearfix property. will have to check cross browsers to see if this effects things. If not this is a fix for this problem.
You’re using the clearfix method incorrectly. There is nearly never a good reason to use an extraneous empty div as you have here to apply the clearfix. In your example the clearfix class belongs on the #main div.
So, you could leave your .clearfix div (I don’t suggest it) and apply clear: both; to it, which would force #main to enclose the floats.
Or, you could remove the .clearfix div and place the class on the #main div.
Or, you could remove the .clearfix div and simply add overflow: hidden; to #main to have it enclose the floating children.