Hi Guys,
I've got a 2 column CSS layout, that will not pad the right hand floated div down, when the left hand floated div expands with content.
Even if I add 'height: 100%;' in the CSS to the right hand div, the div will still stay the same size.
HTML
CSS
Thanks.
I've got a 2 column CSS layout, that will not pad the right hand floated div down, when the left hand floated div expands with content.
Even if I add 'height: 100%;' in the CSS to the right hand div, the div will still stay the same size.
HTML
Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Site Title</title>
<link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
<!--[if IE ]>
<link href="iecss.css" rel="stylesheet" type="text/css">
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="top">
<div id="tnav">
<ul id="tnavlist">
<li><a href="#" id="tnav_active">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Services</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">E-Books Download</a></li>
</ul>
</div><!--/tnav-->
<div id="banner">
banner image here....
</div><!--/banner-->
</div><!--/top-->
<!--clearfloat--><div class="clear"></div><!--/clearfloat-->
<div id="mid">
header image here
</div>
<div id="low">
<div id="contentcontainer">
<div id="content">
content goes here....
</div><!--/content-->
</div><!--/contentcontainer-->
<div id="rnav">
<ul id="rnavlist">
<li id="rnav_active"><a href="#">Who are we?</a></li>
<li><a href="#">What do we offer?</a></li>
<li><a href="#">Why are we different?</a></li>
<li><a href="#">Quality assured</a></li>
<li><a href="#">Your business</a></li>
<li><a href="#">Testimonials</a></li>
</ul>
</div><!--/rnav-->
</div><!--/low-->
<!--clearfloat--><div class="clear"></div><!--/clearfloat-->
<div id="footer">
<div id="fleft">
<div id="lfooter">
footer
</div>
</div><!--/fleft-->
<div id="fright">
<div id="rfooter">
footer
</div>
</div><!--/fright-->
<!--clearfloat--><div class="clear"></div><!--/clearfloat-->
</div><!--/footer-->
</div><!--/wrapper-->
</body>
</html>CSS
Code:
html, body { background: #d6d7c9; font-family: Arial; }
#wrapper { width: 765px; margin: 0 auto; }
/* Section Containers */
#top { width: 765px; }
#mid { width: 765px; height: 199px; }
#low { width: 765px; }
#banner { width: 261px; float: right; }
#banner img { margin: 0 auto; padding-left: 45px; }
/* Top Navigation, and nav styles */
#tnav { width: 500px; float: left; }
#tnavlist { list-style: none; padding: 0; margin: 0; padding-top: 35px; padding-left: 5px; }
#tnavlist li { padding-left: 15px; font-size: 14px; float: left;}
#tnavlist a { text-decoration: none; color: black; }
#tnav_active { font-weight: bold; }
/* Content */
#contentcontainer { width: 500px; float: left; }
#content {padding-left: 20px; font-size: 14px; width: 475px; text-align: left; }
#content .p { line-height: 2.0em; }
#content h1 { font-size: 20px; padding-bottom: 20px; padding-top: 10px; }
#content h2 { font-size: 14px; color: #84865e; }
/* Right Hand Navigation, and nav styles */
#rnav { width: 261px; float: right; background: #e3e2d0; }
#rnavlist { padding-top: 10px; list-style: none; }
#rnavlist li { padding-left: 15px; font-size: 18px; height: 50px; }
#rnavlist a { text-decoration: none; color: black; }
#rnav_active {background-image: url(images/arrow.gif); background-repeat: no-repeat; background-position: 0 .4em;}
#rnav img { padding: 0px 0px 25px 0px; margin: 0px; }
/* Footer */
#footer { width: 765px; background: #9fa275; color: #ffffff; height: 40px; }
#fleft { width: 500px; float: left; font-size: 12px; }
#fright { width: 261px; float: right; font-size: 10px; }
#lfooter { padding-top: 12px; padding-left: 20px; }
#rfooter { text-align: center; padding-top: 12px; }
.clear { clear: both; height: 0; font-size: 1px; line-height: 0px; }Thanks.