columns uneven in css

designaire
designaire used Ask the Experts™
on
I have a 2 column web page.  The left side is longer than the right. How do I make the right side even in height to the right side? The different colored background shows through on the bottom of the right column.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Hi designaire,

Try this..

this is done using javascript...
<!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>Untitled Document</title>
<script type="text/javascript">
<!--
onload=function() {

var divh = document.getElementById('colum').offsetHeight;
document.getElementById('colum1').style.height=divh+"px";
document.getElementById('colum2').style.height=divh+"px";


 }
//-->
</script>
</head>
<body >
<div id="main" style="width:300px;border:1px solid red;overflow:hidden">
<div id="colum" style="width:100px;border:1px solid blue;float:left; ">
Providing an intuitive, yet eye-catching navigation on your site, is one of the ingredients for a great design. And with the performance improvements in newer browsers and the rise of JavaScript frameworks such as jQuery, it is becoming easier to include beautiful animations in your page designs.

Today we are making a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.
</div>
<div id="colum1" style="width:100px;border:1px solid green;float:left;">
 an intuitive, yet eye-catching navigation on your site, is one of the ingredients for a great design. And with the performance improvements in newer browsers and the rise of JavaScript frameworks such as jQuery, it is becoming easier to include beautiful animations in your page designs.

Today we are making a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for crea
</div>
<div id="colum2" style="width:94px;border:1px solid black;float:left">
 navigation on your site, is one of the ingredients for a great design. And with the performance improvements in newer browsers and the rise of JavaScript frameworks such as jQuery, it is becoming easier to include beautiful animations in your page designs.

Today we are making a CSS3 & jQuery halfto
</div>
</div>
</body>
</html>

Open in new window

LZ1
Top Expert 2011

Commented:
If the above does not work, please post your code or a livel ink.

Author

Commented:
I might just have to use one of the samples.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial