View Full Version : IE displays layout incorrectly

02-13-2008, 11:31 PM
My website has a header with two sidebars and a center maincontent div. when displayed in firefox it displays correctly but when in IE7 the maincontent div moves below the sidebar divs even with a clear float both. Any help would be great.

View the website.


02-14-2008, 02:30 AM
Take the width out of you:

#container #maincontent {
background-color: #990000;
padding-top: 35px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 5em;
text-align: left;
overflow: hidden;
/*width: 690px;*/

And try it again.

02-14-2008, 03:04 AM
I Have done that before. The problem is that the text gets pushed down and out of wack when window gets smaller.

Is there a way to make the maincontent and the two sidebars "fixed" or would it be better to allow the text to move?


02-14-2008, 03:10 AM
How smaller are you talking about? I tested it without the width in 800x600 IE and FF and it was ok.

02-14-2008, 03:17 AM
Its not just the browser getting smaller. I would prefer to have the webpage contain its original display as if the browser was opened fully (scrolling with the browser would be needed if you went really small on the screen). I would like this because when I add a line of pictures and reviews they don't get push out of view if someone decreases the size.

Also, I kinda want to learn how I would accomplish this task so that I can keep learning.

02-14-2008, 02:33 PM
The best thing is to keep it simple. Therefore, to have more control over a design I prefer designing with fixed dimension. i.e. 700px and leave the height to the browser and the content. Then I can make my left and right columns 200px and 150px or whatever and the difference would be the center, for the main content.
if you would reduce the size of your browser to 640x480, the page would come stay the same but you would have to scroll sideways to see all the content. However, your design wouldn't change.

Google for CSS tutorials and you'll find a wealth of information on Fluid and fixed designs.

hope it helps.

02-14-2008, 06:08 PM
Thanks for the help. I really want my site to take up the whole webpage and I've learned that makes it much more difficult that if I just used a specifically sized container.

I'll check out google css. Thanks again.

02-14-2008, 08:02 PM
Looks great here in both IE and FF

02-14-2008, 08:27 PM
I was intrigued by the problem you had.
Check this out:


and have fun adapting it to your design.

02-16-2008, 03:36 AM
Thats great information. Thanks, I'll check it out.