Hello friends. I am trying to nest two div's (side by side) inside of a 'main' div.
I need them both to be exactly the same height regardless of how much content is in either coloumn. I cannot set a definite height because I need the height to adjust according to content. How can I do this? Much thanks.
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
* {margin:0;padding:0;}
body, td, th {
background:#000;
margin-left: 0px;
margin-top: 30px;
margin-right: 0px;
margin-bottom: 0px;
font-family: Tahoma;
font-size: 11px;
color: #333333;
}
#contentFrame {
width: 680px;
background-image:url(BIO/bg_contentDots.gif);
padding-left: 25px;
padding-right:40px;
}
#contentLeft {
width:225px;
float: left;
}
#contentRight {
width: 440px;
float:right;
}
</style>
</head>
<body>
<div id="contentFrame">
<div class="style10" id="contentLeft">
<p>asdfasdfasdf</p>
<p>asdfaf</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div class="style2" id="contnetRight">
<p class="style3">asdefasdfasdfasdfasdfasd<a href=http://www.webdeveloper.com/forum/archive/index.php/"#"></a></p>
<p class="style3">asdfasdfasdfasdfasdf</p>
<p class="style2"> </p>
</div>
</div>
</body>
</html>You could put the columns as a background-image (repeat-y) in the contentFrame div. You seem to already have something there though...to expand on BonRouge's suggestion look into faux columns (<!-- m --><a class="postlink" href="http://www.google.com/search?q=css+faux+column&sourceid=mozilla-search&start=0&start=0&ie=utf-8&oe=utf-8&client=firefox-a&rls=org.mozilla:en-US
fficial">http://www.google.com/search?q=css+faux ... Sfficial</a><!-- m -->)
I need them both to be exactly the same height regardless of how much content is in either coloumn. I cannot set a definite height because I need the height to adjust according to content. How can I do this? Much thanks.
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
* {margin:0;padding:0;}
body, td, th {
background:#000;
margin-left: 0px;
margin-top: 30px;
margin-right: 0px;
margin-bottom: 0px;
font-family: Tahoma;
font-size: 11px;
color: #333333;
}
#contentFrame {
width: 680px;
background-image:url(BIO/bg_contentDots.gif);
padding-left: 25px;
padding-right:40px;
}
#contentLeft {
width:225px;
float: left;
}
#contentRight {
width: 440px;
float:right;
}
</style>
</head>
<body>
<div id="contentFrame">
<div class="style10" id="contentLeft">
<p>asdfasdfasdf</p>
<p>asdfaf</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div class="style2" id="contnetRight">
<p class="style3">asdefasdfasdfasdfasdfasd<a href=http://www.webdeveloper.com/forum/archive/index.php/"#"></a></p>
<p class="style3">asdfasdfasdfasdfasdf</p>
<p class="style2"> </p>
</div>
</div>
</body>
</html>You could put the columns as a background-image (repeat-y) in the contentFrame div. You seem to already have something there though...to expand on BonRouge's suggestion look into faux columns (<!-- m --><a class="postlink" href="http://www.google.com/search?q=css+faux+column&sourceid=mozilla-search&start=0&start=0&ie=utf-8&oe=utf-8&client=firefox-a&rls=org.mozilla:en-US
fficial">http://www.google.com/search?q=css+faux ... Sfficial</a><!-- m -->)