Forum Moderators: not2easy
I have a design that fits nicely on a 800x600 or anything higher. It's your standard fixed-width design. I need to add some more information to the design, so would like to add a column about 200 pixels wide to the right side which will appear off the right-edge of the screen on a resolution of 800x600 but will show up fine at 1024x768 or anything higher. Check out Maxim Magazine for an example.
The difficulty I'm having is that I'd still like to have the site centered on the screen. This would be simple enough, expect that if I center the entire width (about 1000 pixels) it won't look good at 800x600. So I guess I'd like to center it on the main 800 pixels at 800x600 and on the full width at higher resolutions.
Does anyone have any ideas of how I can do that? I prefer to use only CSS but I suppose some JavaScript may be a necessary evil.
I suppose some JavaScript may be a necessary evil.
Your right about this, in the sense that CSS has no inherent way to interact with the user's resolution. So if you need to deliver different settings to users at different resolutions, you need a technology that can detect the resolution and adjust things accordingly...i.e., JavaScript.
HOWEVER, the natural occuring behavior of CSS comes to the rescue in this case. If you set the 1000px wide element to center, it won't have any ROOM to do so in an 800px wide browser window. The result will be flush-left, with 200px hanging off the right side. At higher resolutions where centering CAN occur, it will.
Here's a test page to see it in action.
For any that aren't familiar with the centering techniques below, the text-align:center works to center a block level element in early versions of IE, which do not support auto-margin centering. It's on the body tag in this example because the body is the parent container for the block level element we need centered. The margin:0 auto centers the div in compliant browsers which (correctly) do not apply text-align properties to block level elements...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
*{margin:0;padding:0;}
body{text-align:center;}
#box{width:1000px;height:200px;background:#c60;margin:0 auto;}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
cEM
Unfortunately, I don't see that this solution works. If you place some text within that DIV, you'll find that it centers on the 1000px, not on the available width of the screen. Or that's how I see it.
If you place some text within that DIV, you'll find that it centers on the 1000px, not on the available width of the screen.
True, if you center the content of that div within that div, it will center on the 1000px measurement, but if the role of the 1000px wide div is to serve as a container for the rest of the layout, this isn't the case. In other words, if you center the fixed width div, you don't have to center the stuff inside of it. Instead, set the text-alignment on the div itself back to left (the text-align:center on the body is just to center the div on early versions of IE), and then build your layout within that 1000px container.
Here's another test page. Same situation, only this time there's a 200px sidebar on either side with a content div in the middle. Note how the right sidebar hangs off screen at 800px res. I believe this is the effect you were after. Let me know if I've read your goal wrong.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
*{margin:0;}
body{text-align:center;color:#fff;}
#box{width:1000px;margin:0 auto;height:500px;background:#c60;text-align:left;}
#left{float:left; width:200px;height:500px;background:#369;}
#right{float:right; width:200px;height:500px;background:#369;}
#center{margin:0 200px 0 200px;}
</style>
</head>
<body>
<div id="box">
<div id="left">left</div>
<div id="right">peek-a-boo!</div>
<div id="center">middle</div>
</div>
</body>
</html>
cEM
