Hi
Generally if you want a block centred horizontally in a container, set the margin to 0,auto and the containing block text-align to center; (for IE5). If you want the text in the centred block to be aligned left then add a text-align:left; to it.
From your example you want the two column red text to be centered, text align to left and the green nav aligned to left in the viewport, text-align left.
In this case you would do:
#wrapper
{
/* other : rules; */
margin: 0, auto;
text-align : center;
}#wrapper #block1, #wrapper #block2
{
/* other : rules; */
text-align : left;
}You could replace the two divs with one class - they are functionall doing the same thing just in a different position on the screen. So you could ende up with something like this:
#wrapper .textcolumn
{
/* other : rules; */
text-align : left;
}<!-- markup -->
<div id="wrapper">
<div class="textcolumn"> <div id="block2pic"></div>
<p>This perspective has helped me t.....PS...
Does anyone have an idea about how to do this with a absolutely positioned box? - I can't work it out... me stupid.
HTH James
*****************************************************
The discussion list for http://webstandardsgroup.org/
*****************************************************
