PDA

View Full Version : IE displays layout incorrectly


JDesigns
02-14-2008, 12:31 AM
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.

http://www.mountainbackpackers.com/gearreviews_new2.html

mangofreak
02-14-2008, 03: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.

JDesigns
02-14-2008, 04: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?

Thanks..

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

JDesigns
02-14-2008, 04: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.

mangofreak
02-14-2008, 03: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.

JDesigns
02-14-2008, 07: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.

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

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

http://positioniseverything.net/articles/onetruelayout/anyorder
http://www.glish.com/css/7.asp

and have fun adapting it to your design.

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