Seoulscapade

It can be very frustrating working with divs, when trying to modify an existing design. I had a situation where I wanted to modify a design so that the sidebar was not fixed with “relative: absolute” positioning. Things weren’t wrapping how I wanted because of it, plus the sidebar was hiding the footer.

I needed the sidebar to side by side with the content in the one container, but still able to adjust to browser width. Here’s the basic code for how I did it, the basis for which I found on a forum. It’s modified for a fixed width here, though.

First declare this in the head section.

<style type=”text/css”>

#container_div {

width:390px;
padding:6px 0;
border:1px solid #000;
margin:auto;

}

#container_div:after {

content:”;
display:block;
clear:both;

}

#left_div {

float:left;
display:inline; /*required by IE6*/
width:195px;
border:1px solid #999;
margin:0 3px 0 6px;

}

#right_div {

float:left;
display:inline; /*required by IE6*/
width:195px;
border:1px solid #999;
margin:0 6px 0 3px;

}

#left_child p,#right_child p {

font-family:sans-serif;
font-size:0.8em;
text-align:justify;
margin:4px;

}

</style>

Then in the body section, place the divs like this:

<div id=”container_div”>

<div id=”left_div”>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus
nisl ac enim.
</p>

</div>

<div id=”right_div”>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus.
Pellentesque ac ipsum.
</p>

<p>
Quisque nec enim. Nullam elementum. Quisque rhoncus. Ut cursus, pede sit amet facilisis pretium,
</p>

</div>

</div>

The result should look something like this: