Div Expand Equally in Design

The Div tag simply defined is a division within a web page. It is a block of content that can be easily stacked upon top of the other or side by side.

For example, when you have a columnar web page layout, the div's can be used to divide the page into two or more columns.

So we have two div's:

<div id="div1"></div>
<div id="div2"></div>

Now, in a stylesheet declare the following rules.

#div1 { float:left; width:50%;}
#div2 { marging-left:50%; width:50%;}

To get the two columns or div's to expand equally to each other you can use a background image 1x times the width of the container. The container is a holder for the 2 columns in your page.

Heres what I mean (notice container on the ouside of the divs at top & bottom of code)

<div id="container">
    <div id="div1"></div>
    <div id="div2"></div>
</div

Now go back to your style sheet and add the container. The div's we added stay the same. We are just adding a new image as a background.

#container { background: url(url-of-the-background-image.gif) repeat-y 0% 0%; }
#div1 { float:left; width:50%;}
#div2 { marging-left:50%; width:50%;}

Thats it!

Rank By Design, Bend, Oregon USA

helping improve Search Engine Ranking!
rankbydesign bend, oregon usa © 2007 Ph:(530)685-8000