Lars Nielsen's Discoveries

May 26, 2011

Equal height columns using div and CSS

Filed under: Branding,Good Practice,SharePoint — Lars Nielsen @ 7:59 pm
Tags: ,

Finally now SharePoint is using DIV elements in the v4.master page, rather than using tables for layout as SharePoint 2007 did (and which is not xhtml compatible and has a load of other problems as well).

Using DIV’s rather than tables for layout is a great idea, but some things become more difficult to do with CSS and DIV’s. One of the more common issue is now to get a screen layout with two columns of equal height.  With tables in HTML it was easy – just create two cells in a row and they will be sized to be the same height by the browser.  DIV’s however are given a height dynamically to contain their content so it becomes quite difficult to create even a simple layout with 2 columns (DIV’s) of the same height.

There are plenty of possible  solutions to this, and this post lists some of them.  In my work recently I was working on some CSS that seemed to be following this technique.  I guess it works, but it’s not exactly straightforward, and I was having trouble getting it stripped down to just two columns and working in a fixed width design rather than flexible width.  So in the end I found this simpler alternative and used that as the basis for my CSS.  It works fine in all the main browsers (although there is a problem with IE 6 and 7 – see below) and doesn’t involve the complexity of defining widths and relative positions in several places.  It uses a similar trick, in making the background of the whole wrapper to be whatever you want for the background of the left hand column, and the other columns sit to the right and cover the background with another background.  In this, I managed to create a layout with 2 columns of equal height with quite simple and basic CSS.

Here’s the code for a page to show the technique:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div test</title>
<style type="text/css">
div.Main {
  width:980px;
  background:red;
  color:white;
  border:none;
  margin:0 auto;
}

div.Left {
   width:165px;
   float:left;
}

div.Middle_Right {
   margin-left:165px;
   border-left:none;
}

div.Right {
   margin-left:0px;
   background:blue;
   border:none;
}

div.Clear {
   clear:both;
}
</style>
</head>
<body>
<div class="Main">
    <!-- Left -->
    <div class="Left">
    	<div id="New div">
    	Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />
    	Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left
 		</div>
    </div> <!-- /Left -->
    <!-- Middle + Right -->
    <div class="Middle_Right">
        <!-- Right -->
        <div class="Right">
		Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
		Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
		Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
		Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
		Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
		Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
		Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
		Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
		Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
		Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
		Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
		Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
		Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
		Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
		Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
		Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
		Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
		Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
		Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
		Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
		Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
		Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
		Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
	        <div class="Clear">
	        </div>
        </div> <!-- /Right -->
    </div> <!-- /Middle + Right -->
</div> <!-- /Main -->
</body>
</html>

Update

This technique seems to cause problems with IE6 and IE7 in that the colour of the left hand DIV bleeds over into the right hand div at the bottom if the left hand div is higher than the right hand one, and you resize the browser to be less high than the DIV’s themselves. Other browsers seem to be OK. In the case of SharePoint 2010, it doesn’t officially support IE 6 anyway, and nearly everyone who uses IE 7 has upgraded to IE 8 at least, so in practice this may not be too much of a limitation.

Advertisements

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: