FRIHOSTFORUMSSEARCHFAQTOSBLOGSDIRECTORY
You are invited to Log in or Register a Frihost Account!

Div layout broken in certain browsers

 


Magicman
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:
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?
Peterssidan
For me it looks bad in both firefox and IE6. I also noticed that the different parts of the page is djumping around very much when I resized the window. If I have the right width it will show fine.

I think you should change the .container width to a fixed size and not using 100%.
Magicman
Such a simple solution and yet it works. Although my site looses some of its liquid design because of the change it at least works right now. Thanks for the help.
Magicman
Ok its broken again but only in IE and a random assortment of a few other browsers. My major change was to make the width fixed as was suggested. Nothing else I did should affect the layout but it is still completely misplacing everything below the header in these seemingly random browsers. I'll post the new full layout code tomorrow if I can but I want to see if anyone has a way to fix this with the information I have currently available.
Related topics

CSS DIV layout advice
HELP! Unexpliable over sized div appears in Mozilla browsers
Tabular layout dilemma
Silly people and text size, CSS
positioning div top right

Div centering
Apache
Cross-browser style problem!
Problems with pseudo-classes and links
Div Layouts

My recently redeveloped Flash Movie website!
fonts and browser support
Convert your site to XHTML, prices vary
Validating
Redirect to Post -Saving Server Bandwidth !!
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.