Forum Moderators: not2easy
I've got two divs in one container div. Both divs are positioned to float left (so it looks like two table cells in a row, one for menu on the left and one for content on the right).
Everything looks nice in IE, Opera and (most of the time) in Firefox.
The problem is Firefox -> if I refresh the page 10 times, 6 times out of 10 the floating will be broken - the second div will appear UNDER the first div, not on the RIGHT.
I don't really know what to do since the problem appears so random (:
Any ideas?
I am using HTML 4.01 Strict doctype with IE 6, Opera 8 and Firefox 1.0.2.
Ps. Would an XHTML 1.0 Strict doctype be more appropriate?
Of course, this means you might run into IE box-model problems. But that's another story.
The important (and confusing, to me) part is, that it works (and breakes) randomly (:
It seems that only the float: left; rule in CSS is being ignored randomly - everything else always renders correctly.
I'll post it, maybe it'll help someone.
So, this is the working layout (only the very basic elements for the sake of simplicity)
CSS:
#contain {
width: 772px;
text-align: left;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
background: white url(site_img/menubg.gif) repeat-y top left;
}
#menu {
width: 140px;
float: left;
background-color: #A1A8B0;
text-align: left;
padding-top: 10px;
}
#content {
width: 624px;
float: right;
vertical-align: top;
background-color: white;
}
#footer {
background-color: #EAEBED;
text-align: center;
padding: 5px 0px 3px 0px;
font-size: 11px;
width: 100%;
clear: both;
}
XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<link rel="stylesheet" href="index.css" type="text/css" title="default" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
</head>
<body>
<div id="contain">
<div id="menu">Here goes the menu thingy</div>
<div id="content">Here there be content</div>
</div>
<div id="footer">copyright 'n stuff</div>
</body>
</html>
The reason for randomly 'ignoring' the float: left; property of the #menu and #content divs was that #container had the display: table; property set. I had to remove this property and set the footer to clear: both; so it doesn't jump up to the header. There - the layout is now rock solid - with one flaw.
Since I removed the display: table; property from the #container, it's height is now 0px because both elements inside are floating. I have yet to overcome this issue, any pointers? (:
it's height is now 0px because both elements inside are floating
Several choices:
(a) float the container. This forces it to expand and contain it's floated children.
(b) add a clearing element (a <br /> set to clear:both, for instance) to the bottom of the container.
There are a few other ways to do this, but these two are the clearest, simplest, and quickest.
cEM
a) I set the #contain to float: center;, still height 0px;
b) Just before the finishing div I added this: <br style="clear: both;" /> ... no change.
It works excellent in the container div, thanks!
