I recently switched the layout of a part of my site to divs from a table. The xhtml code is basically one container div than separate divs for each piece. I ran a browsershots test on it and many of the shots ended up coming out like this and yet it looks fine in Firefox and IE.
My CSS code dealing with the layout is basically as follows:
What am I doing wrong that makes it display incorrectly like the image and what can I do to fix it?
My CSS code dealing with the layout is basically as follows:
| Code: |
|
.menu{ float:left; width:200px; min-height:400px; } .content{ width:600px; min-height:400px; float:left; } .header{ height:100px; width:600px; color:white; float:left; } .topcorner{ float:left; height:100px; width:200px;} .bottomcorner{ float:left; height:100px; width:200px; } .footer{ height:100px; width:600px; float:left;} .container{ position:relative; width:100%; min-height:200px; } |
What am I doing wrong that makes it display incorrectly like the image and what can I do to fix it?
