how do I match varying DIV heights?

**FordCorsair** · 03-03-2009, 10:02 AM

No doubt covered before but I've spent ages looking for the correct terminology for this 'popular?' problem thus gave into posting a new thread.

I would like my "contentmain" DIV and "contentright" DIV that are within "wrapper" DIV to be of equal length no matter how much info they have in them. I've include more code than required but if if anyone can help and explain in layman terms what was needed, I'd be very grateful.

Thanks, Dom

My CSS code:

Code:

HTML  {
	PADDING: 0px; MARGIN: 0px;
}
BODY {
	PADDING: 0px; MARGIN: 0px; COLOR: black; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: black; TEXT-ALIGN: center;
}
A:link {
	BACKGROUND: none transparent scroll repeat 0% 0%; TEXT-DECORATION: none; COLOR: blue;
}
A:visited {
	BACKGROUND: none transparent scroll repeat 0% 0%; TEXT-DECORATION: none; COLOR: purple;
}
A:hover {
	COLOR: red; TEXT-DECORATION: underline;
}
H1 {
	MARGIN: 0.25em 4px 0; PADDING: 0; FONT-WEIGHT: bold; FONT-SIZE: 120%; COLOR: #333399;
}
H2 {
	BACKGROUND: #333399 repeat scroll 0% 0%; MARGIN: 8px 0; PADDING: 0 4px;FONT-WEIGHT: bold; FONT-SIZE: 90%; COLOR: white; HEIGHT: 18px;
}
H3 {
	FONT-WEIGHT: bold; FONT-SIZE: 90%; BACKGROUND: #9eafd3 repeat scroll 0% 0%; MARGIN: 0 0 0.25em; PADDING: 0 4px 0.15em; HEIGHT: 18px;
}
H4 {
	FONT-WEIGHT: normal; FONT-SIZE: 90%; MARGIN: 0; PADDING: 0 24px 0; COLOR: black;
}
P {
	MARGIN: 0; PADDING: 0 12px 0.5em;
}
#wrapper{
	BACKGROUND-COLOR: pink; MARGIN: 0.25em auto; PADDING: 0; TEXT-ALIGN: center; WIDTH: 1024px; HEIGHT: 400px;
}
#contentmain {
	BACKGROUND-COLOR: white; MARGIN: 0; PADDING: 0.25em 4px 0.5em; TEXT-ALIGN: left; COLOR: black; WIDTH: 772px; FLOAT: left;
}
#contentmaininfo {
	BACKGROUND-COLOR: none; MARGIN: 0; PADDING: 0 0 0.5em; WIDTH: 100%; COLOR: black; BORDER-BOTTOM: red 1px solid; FLOAT: left;
}
#contentright {
	BACKGROUND: white; MARGIN: 0; PADDING: 0.25em 0 0.5em 0px; TEXT-ALIGN: left; COLOR: black; WIDTH: 238px; FLOAT: right;
}
#contentrightinfo {
	BACKGROUND-COLOR: none; MARGIN: 0; PADDING: 0 0 0 6px; WIDTH: 94%; LINE-HEIGHT: 1.2; FLOAT: left;
}

My HTML code:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<title>Matching Div Lengths</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="divlength.css" rel="stylesheet" type="text/css">

</HEAD>

<BODY>
<div id="wrapper">
<div id="contentmain">
<div id="contentmaininfo">
<h1>Training Support Services (TSS)</h1>
<img src="images/#.jpg" width="200">
<p>Riuscil dunt lan ea ad magnism olorperit ipisci ex eriureetum nos nostissit illuptatem in vel ip exero commod euguerc ilismol esequi blam, quis accum delenis exero consed te doloborper iure faciduisl et prat nonummolore corperit wisim velit dolenit lorem zzrilla ndreetumsan henit la feum quamconulla conulla consenisim zzriureet ea corero ea augiamet pratum irilluptat vulla adigna coreet laoreetum autat ulputet eugiam ipsusci tie min hent ipit veliquat ad tat. Duis eugait, susto consecte tat, vel init veliqui tiniam vullaortie feuip et, sit, con veliqui tet, si.<br>
• <a href="#.html">Click Here</a><br>
The link will take you to courses.</p>

</div><!-- end of contentmaininfo 01-->

<div id="contentmaininfo">

<h1>Invalidation Team</h1>
<img src="images/#.jpg" width="200">
<p>Olortions non hendigna consequ ipsuscing exer se doloborem vel dio ex exer ipismod olorpercin veleniam nons elit, sit nit aci erilluptatet la faccummolore mod mod et, vullum init wisi.<br>
Iquatum vendre volor se et praessi.<br>
• <a href="#">More Info Here</a></p>
</div><!-- end of contentmaininfo 02-->

<div id="contentmaininfo">

<h1>Media Centre</h1>
<img src="images/#.jpg" width="200">
<p>Olortions non hendigna consequ ipsuscing exer se doloborem vel dio ex exer ipismod olorpercin veleniam nons elit, sit nit aci erilluptatet la faccummolore mod mod et, vullum init wisi.<br>
Iquatum vendre volor se et praessi.<br>
• <a href="#">View Gallery</a><br>
The link will take you to an online logo & photo gallery.</p>
</div><!-- end of contentmaininfo 03-->
</div><!-- end of contentmain-->

<div id="contentright">
<div id="contentrightinfo">
<h3>Related Links</h3>
<ul>
<li><a href="#.html">Directors</a></li>
<li><a href="#.html">School</a></li>
<li><a href="#.html">Home Town</a></li>
<li><a href="#.html">Other Towns</a></li>
<li><a href="#.html">Recruiting</a></li>
</ul>
<br><br>
<h3>Company Log-in Required</h3>
<ul>
<li><a href="http://#">Company Policy</a></li>
<li><a href="http://#">Company Training</a></li>
<li><a href="http://#">Company Classifieds</a></li>
</ul>
<br>
<form>
Search Compnay<br>
<input type = "text" name = "username" size ="24"><br>
<table border="0" cellspacing="0" cellpadding="0"><tr>
<td width="140px"><ul><li><a href="http://#">Site Map</a></li></ul></td>
<td><input name="Submit" type="submit" value="GO"></td>
</tr></table>
</form>

</div>

<div id="contentrightinfo"><h3>Contacts</h3>
• <a href="mailto:#">Office Mngr - Director</a><br>
• <a href="mailto:#">Office Mngr - School</a><br>
• <a href="mailto:#">Secretary - Director</a><br>
• <a href="mailto:#">Admin - School</a><br><br>
</div>

<div id="contentrightinfo"><h3>Webmaster</h3>
Media Centre<br>
• <a href="mailto:#">Web Developer</a>
</div>

</div><!-- end of contentright-->

</div><!-- end of wrapper-->

</BODY>
</HTML>

**Snookerman** · 03-03-2009, 04:20 PM

Check out this tutorial:
http://net.tutsplus.com/videos/screencasts/everything-you-know-is-wrong/

Good luck!

Thread: how do I match varying DIV heights?

Thread Tools

Search Thread

how do I match varying DIV heights?

The Following User Says Thank You to Snookerman For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions