How to stretch the height of a div to the same as it’s neighbor div with css

This example illustrates how to force the height of a div to the same as it’s neighbor div.

<html>
<head>
<title>Stretch Div to the same height as it's neighbor</title>
<style>
#page {
width:80%;
overflow:hidden;
}

#main {
background-color:red; 
width:80%;margin-bottom: -99999px; 
padding-bottom: 99999px;
float:left;}

#left,#right{	
margin-bottom: -99999px; padding-bottom: 99999px;
background-color:green;
width:10%;
float:left;
}
</style>
</head>

<body>

<div id="page">
<div id="left">left-column</div>
<div id="main">main-column<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>end of main-column</div>
<div id="right">right-column</div>
</div>

</body>

</html>

To try the above code out, create a file such as “testDivHeight.html”, copy the above code and paste it into the file you just create, then open the file using your favorite web browser.

Search within Codexpedia

Custom Search

Search the entire web

Custom Search