Forum Moderators: not2easy
hopefully that will solve your problem (hopefully) good luck.
Your going about it the right way by using percentages, but you need to completely avoid absolute pixel values.
You say "several divs positioned under each other" so can't you just use normal flow to position the divs vertically (and left and right margin set to auto to center them)?
The other problem with absolute pixels values is that if the user increases the font size then the text may get clipped by an absolute div, whereas a normal div will expand to contain it.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.container {width:100%;padding-left:15%;padding-right:15%;background-color:blue;}
</style>
</head>
<body>
<div align="center" class="container">
<div style="height:400px;background-color:red;">
</div>
</div>
</body>
</html>
you need to have the container be the primary div tag, as another person noted, not the body tag. The body tag is very unreliable if you want to use it to create padding and or margins, opera for example treats it differently than most other browsers.
This is a 'good thing'. You can't assume everyones browser window is going to be the same size as yours. Your better off producing a design that copes well with the resizing, rather than forcing a horizontal scroll bar.
Say you decide (as many do) "Okay I'll take the easy way out and make my page a static 750px width - that way it will look the same in everything from 800x600 upwards"
But then..
What about those who have the 'Explorer Bar' open?
What about those on portrait displays?
Or those with PDA browsers?
What about all the wasted space on larger displays?
Or even those who just don't always surf with the window maximised?
However, if you do choose the dark side, then the easiest way is probably just to stick it all in a container div and set the width of the container to an absolute value (e.g. 750px or similar). Then you can center the container div so at least the page appears centralised on larger displays.
note: the static vs fluid design jihad has been done to death on this site see many, many other posts for prolonged discussions on the benefits and pitfalls of both.
<div align="center"> Instead just set the left and right margin of the div to auto using
margin: 0 auto;
The code you provided doesnt work for me Phoenix. When the window gets smaller, it still keeps its 15% padding of the current window size. I want it to have 15% padding of the maximum window size. And if the window gets smaller than the page width, you have to scroll the page to see the full width of it. Maybe I wasnt completely clear on that.
If I were you I'd just declare the main content div body as fixed width and forget trying to get this percent stuff working, that's what I usually do, set it as maybe 750px wide, then just center it, using either align="center" if you aren't using a strict doc type or the margin: 0 auto; method above, which I haven't had much luck with personally, especially on older browsers, which is why I don't use it.
text-align: center
Shadows Papa
