first of all, the answer is to not code in absolute sizes, in this case pixels. rather, you should use relative sizes such as percentages for your margins, width, positions etc.
as an additional point, your CSS is faulty. having values such as “left: 15” is insignificant without a proper unit of measurement. “left: 15px” for instance.
Yes, use percentages alone or in combination with some px measurements in key places. I just did this layout and it expands and contracts nicely to fit most all screen sizes. I experimented with an absolute positioned version but the lack of flexibility made it unworkable.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “xhtml11.dtd”>
<?xml version=“1.0” encoding=“iso-8859-1”?>
<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en”>
<head>
<title>Bare bones 3 column CSS layout</title>
<style type=“text/css”> #leftpanel {
position: absolute;
top: 140px; /* resize these bits to liking /
left: 10;
width: 200px; / works best with fixed
width right - left divs*/
} #rightpanel {
position: absolute;
top: 140px; /* resize these bits to liking /
right: 0;
width: 200px; / works best with fixed
width right - left divs*/
} Content {
position: absolute;
top: 140px;
padding-left: 220px; /* 20px to play with /
padding-right: 220px; / 20px to play with */
}
</style>
</head>
<body>
<h1>Bare bones 3 column CSS layout</h1>
<!-- Content here -->
<div id="content">
<p>You can put your content here, under the space
for a header, or you can re-arrange the
divs in the html to put your right or left column first.</p>
</div>
<!-- Right column here -->
<div id="rightpanel">
<p>This is a good place to pop nice optimized
text into, especially if your #content div
is full of images and little text. I like to
put an 'editors note' here: Just an excuse to
squeeze optimized copy into the html flow without
bothering the user ;-)</p>
</div>
<!-- Left navigation etc -->
<div id="leftpanel">
<p>Links, come last, presuming your 'header' has
a 'main sections' navigation with regular text links
this is just fine for SE's and magic for
optimization.</p>
</div>
</body>
</html>
-*------------
try this, i forgot the site where i get this but i think this will answer ur query…
just want to know the difference esp to redux.
Is there any diff when i use absolute or relative size in CSS,
i also want any feedback in my code attach above, i actually test it in 800x600 and 1024x768, and it seems to be it adjust automatically acording to screen size…
please reply asap i need to know sincei actually working in CSS experimenting to its capability
very quickly: absolute sizes are exactly as you specify them…15 px is always 15 px, no matter how big or small the user sets his/her browser to. relative sizes, particularly percentages, adapt to the size of the browser.
don’t confuse position: relative / position: absolute with relative and absolute MEASUREMENTS. i’m only talking about the units of measurement you’re using…if you set pixels, you set an absolute value, whereas using percentages is relative to the browser’s size.
positioning is a completely different can of worms… have a read through (the rather dry, yet comprehensive) http://www.w3.org/TR/REC-CSS2/visuren.html#positioning-scheme