How to position using CSS on different Screen Resolution & Sizes?

Hi guys!

I am positioning 2 boxes using CSS on a 800 X 600 pixels screen resolution. See this

However, when viewed on a 1024 X 768 screen, there are a lot of empty space on the right size.

Need some advice how to code CSS to ensure that the 2 boxes expand to take the size of the screen (with a margin-left & right of 15px)?

my current css code for the 2 boxes.

.searchbar { position:absolute; left:150; top:20; right: 15; width:620;height: 35;background:#666666;color: #FFFFFF; padding:10;}

.top {position:absolute; left:15; top:55; width:755;border-top-width: 2; border-bottom-width: 1; border-left-width: 1;border-right-width: 1; border-top-color: #999999; border-bottom-color: #999999; border-left-color: #999999; border-right-color: #999999; border-style: solid; padding-top: 50px; padding-left: 15px; padding-bottom: 50px;}

Thks in advance…!

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.

You might also want to investigate giving up on position: absolute, and investigate float instead.

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>

   &lt;!-- Content here --&gt; 
   &lt;div id="content"&gt; 
   &lt;p&gt;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.&lt;/p&gt; 
   &lt;/div&gt; 
   &lt;!-- Right column here --&gt; 
   &lt;div id="rightpanel"&gt; 
   &lt;p&gt;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 ;-)&lt;/p&gt; 
   &lt;/div&gt; 
   &lt;!-- Left navigation etc --&gt; 
   &lt;div id="leftpanel"&gt; 
   &lt;p&gt;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.&lt;/p&gt; 
   &lt;/div&gt; 

</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.

redux, then wat is the difference between relative and float? which should I use to better adapt my site to 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