Two Cloumn Equal Height Layout With CSS
I wanna create a two column layout using CSS. Both clumns would have equal height. This is how we can do it:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html>
<head>
<title>Two Cloumn Equal Height CSS Layout</title>
<style type=”text/css”>
#container{
background-color:#fff;
overflow:hidden;
width:750px;
}
#div1{
background-color:#99cccc;
width:600px;
border-right:150px solid #c33; /* The width and color of the div2 */
margin-right:-150px;
float:left;
}
#div2{
background-color:#cc3333;
width:150px;
float:left;
}
</style>
</head>
<body>
<div id=”container”>
<div id=”div1″>This is left div 1 content<br />This is left div 1 content</div>
<div id=”div2″>This is div 2 content</div></div>
</body>
</html>
border-right:150px solid #c33;
This line of code just gives a color to the div2.
margin-right:-150px;
This line of code create space on the right for div2.
Other then that everything else is self explanatory.
(No Ratings Yet)
Loading ...
Leave your response!