Page 2 of 2

Posted: Fri Sep 28, 2007 4:02 am
by Sindarin
I just can't get it to work with my test files...

I did what you said I made a <div id="wrapper"> before the contents and a </div> after of course.
I put your css code, but it seemed to not have any effect...

Maybe it's wrong that I use absolute or fixed positioning?

Posted: Fri Sep 28, 2007 4:31 am
by matthijs
Yes. If you give an element an absolute position, it's positioned absolutely, relative to it's first positioned parent element. So indeed in your case the absolute positioning will position the element absolutely relative to the HTML element.

If you would give the wrapper div a position by:

Code: Select all

body { margin:0;padding:0; }
#wrapper { margin: 0 auto; width:800px;position:relative; }
#somecontentelement { position:absolute;top:30px;left:200px; }
Now, the somecontentelement will be 30px from the top of the wrapper and 200px from the left side of the wrapper's left edge. Still with me?

However, you should know that using absolute positining for layouts has the drawback that an element positioned that way is taken out of the normal document flow. And it can happen that it will start overlapping other content.

That's why many people choose another method for laying out designs: floats. A float will float as far as it can, but not overlap other elements. So for your regular 2 col layout you would do something like:

Code: Select all

body { margin:0;padding:0; }
#wrapper { margin: 0 auto; width:800px;}
#header { height:100px; }
#maincontent { float:left;width:600px; }
#sidebar { float:right;width:180px; }

Code: Select all

<body>
<div id="wrapper">
<div id='header">
<h1>logo</h1>
</div>
<div id="maincontent">
<p>blabla</p>
</div>
<div id="sidebar">
<p>side</p>
</div>
</div>
</body>