Hi,
I'm am trying to make a tableless designed webpage but I'm strugling a bit in positioning the divs.
Lets say I want 3 divs (1 menu, 1 main, and 1 right) on a page. The page must be optimized for a specific screenresolution. Lets say 1000pixels to make it easy. In case the monitor is larger the 3 divs must be in the center of the screen (ex. 1600px monitor - the first div must start at 301px and the last must go to 1300px)
What I'm trying to do is to something likje this:
<div style="text-align: center;">
<div style="text-align: center; width:1000px">
<div style="width: 200px ;position:absolute; left: 0px"></div>
<div style="width: 700px ;position:absolute; left: 200px"></div>
<div style="width: 100px ;position:absolute; right: 0px"></div>
</div>
</div>
Just an example. The problem is that I cannot use position:absolute because it uses the whole page as pixel-reference and therefore ignores the alignment of center and puts the divs in the site-position instead of the parent-div. Does I use position:relative it will use the parent div but it will position the divs in a new line each. and the top-property set to minus X will just merge them into eachother instead of position them after eachother horizontally as I would like it.
Any surgestions on how to do this wihout using a table. |
