Equal height div

Posted: June 13, 2012 in web

<style>
/* Left menu */
.leftMenu{
width: 200px;
border:2px solid green;
float:left;
background-color:#c0c0c0;
position: absolute;
top:0;
bottom:-10px;

}
.leftMenu1{
width: 200px;
border:2px solid green;
float:left;
background-color:#c0c0c0;
position: absolute;
left: 200px;
top:0;
bottom:0px;

}

/* Main Content area */
.mainBox{
border:2px solid red;
background-color: orange;
padding-left: 800px;
}
.mainWrapper{
border:2px solid white;
position:relative;
}
</style>

<div class=”mainWrapper”>
<div class=”leftMenu”>
left
</div>
<div class=”leftMenu1″ style=”width:600px;”>
left
</div>

<div class=”mainBox”>
main<br /><br /><br /><br /><br />
main<br /><br /><br /><br /><br />main<br /><br /><br /><br /><br />main<br /><br /><br /><br /><br />main<br /><br /><br /><br /><br />main<br /><br /><br /><br /><br />main<br /><br /><br /><br /><br />

main<br /><br /><br /><br /><br />main<br /><br /><br /><br /><br />main<br /><br /><br /><br /><br />
</div>

</div>
<div style=”height:200px;border:1px solid red;”></div>

 

 

from

http://jsfiddle.net/PH3t2/

Advertisements

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