Equal Divs In CSS - Horizontally & Vertically

Expanding Div's Equally On Your Web Page Using CSS

The Div tag is simply a division within a web page. It usually contains a block of content or images that can be easily positioned on a page using code within a CSS Style Sheet.

Your Style Sheet can be either within your Html in the Head section or attached to an external file. For simplify sake we will include it in the Head section.


Dividing the Divs Horizontally

For example in a two column web page layout, the div’s can be used to divide the page horizontally.

Within the HTML page and inside the Body we can create two div’s equal in wish by using the following:

<div id="colleft">
  
</div>

<div id="collright">

</div>

Notice we have given each div an id named div1 and div2. This will allow us to style each one individually. We can give each div it's own width, for example, in a stylesheet declare the following rules:

<style type="text/css">
<!--

#colleft {float:left; width:300px; }
#collright {float:left;  width:300px;   }

-->
</style>
image used - click to view
image used - click to view
Create equal columns
Create equal columns

Expanding each the Divs Equally (vertically)

This divides the 2 divs or columns equally in width on our page and floats them to the left. But what if we want to also expand then equally in height?

To get the two columns or div’s to expand equally to each other you can use a background image with the same width of as div1 and div2 added together.

One side of the image shade it 300px wide in a color of your choice. This creates an illusion that both columns are equal in height (this is also referred to as called faux columns). You will notice as the content grows, the columns will expand and grow equally in height.

Our style sheet we add:

 

#container {width:600px; clear:both;background: url(backgd.gif) repeat-y 0% 0%; border:thin #CCCCCC solid}

The total width will be the container and will include the 2 columns in your page. In our html code the container wraps both the divs at top & bottom as shown here:

 

Adding The Container (shrink wrap the columns)

<div id="container">

<div id="colleft">

<ul>
<li>Navigation Area</li>
<li>Your Links Here</li>
</ul>
  
</div>

<div id="collright">

<p>Creating equal height columns is all in how you set up the background image. We need our background image to as wide as the 2 columns</p>

<p>So, we'll make the background image 600 pixels wide - 300px each side. Open up your image editor and create a new document that is 600 pixels wide by 5 pixels tall. </p>

</div>

</div>

The Completed Page Showing Equal Height Columns

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Example</title>

<style type="text/css">
<!--

#container {overflow:hidden; background:#0f0; width:600px; clear:both;background: url(backgd.gif) repeat-y 0% 0%; border:thin #CCCCCC solid}
#colleft {float:left; width:300px;}
#collright {float:left;  width:300px;}

-->
</style>

</head>

<body>

<div id="container">

<div id="colleft">

<ul>
<li>Navigation Area</li>
<li>Your Links Here</li>
</ul>
  
</div>
<div id="collright">

   <p>Creating equal height columns is all in how you set up the background image. We need our background image to as wide as the 2 columns</p>

   <p>So, we'll make the background image 600 pixels wide - 300px each side. Open up your image editor and create a new document that is 600 pixels wide by 5 pixels tall. </p>

</div>

</div>

</body>
</html>

About The Author

Erik has a handful of websites that he actively maintains. His site Rankbydesign specialize in how to improve Google rankings using Wordpress.

More by this Author


Comments 1 comment

umie 4 years ago

nice

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working