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 or give it a width. The container is a holder for the 2 columns in your page.

Heres what I mean (notice container on the outside 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 { margin-left:50%; width:50%;}

Thats it!

This entry was posted on Sunday, November 12th, 2006 at 10:11 am and is filed under SEO Oregon. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.