Div Expand Equally in Design
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!
