Click to See Complete Forum and Search --> : Div's height not adjusting to content


popcop
09-19-2009, 08:06 AM
i have a div that has some text and images within it but for some reason the dive height doesnt seem to adjust and the content seems to continue past the bottom of the div

here is the code im using:

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Gerry Mckay - Portfolio</title>
<link href="css/master.css" rel="stylesheet" type="text/css" />
</head>

<body>



<div id="content">

<div id="left">
<span class="about">About Me.</span>
<br />
CCCC
<br />
</div><!-- close left -->

<div id="right">

<div id="header"><img src="images/topheader.gif" width="500" height="150" /></div>

<div class="row" ><span class="headers">
<img src="images/webwork.gif" width="44" height="44" align="left" />Arnold Clark </span><br />
<span class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultricies aliquet viverra.</span><br><br>
<img src="images/work/1/ac_home.jpg" class="thumb_holder">
<img src="images/work/1/ac_search.jpg" class="thumb_holder">
<img src="images/work/1/ac_detailed.jpg" class="thumb_holder">
<br />
<br />
View Gallery
</div><!-- close row-->


</div><!-- close right-->
</div><!-- close content -->
</body>
</html>


CSS

@charset "UTF-8";
/* CSS Document */

body {
margin:10px;
background-color:#665b4b;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#FFF;
background-image:url(../images/topleft_logo.gif);
background-repeat:no-repeat;
}

a {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#0CF;
text-decoration:none;
}

#header {
height:160px;
width:400px;
}

#left {
width:225px;
height:500px;
float:left;
padding-top:200px;
padding-left:10px;
}

.slider_header {
font-weight:bold;
width:195px;
height:10px;
padding:5px;
background-color:#00476a;
text-align:right;
}

.row {
clear:both;
}

#right {
display:block;
float:left;
margin-left:50px;
margin-top:30px;
}

.thumb_holder {
margin-right:10px;
margin-bottom:10px;
float:left;
padding:10px;
background-color:#ffffff;
}

.about {
font-family:"Arial Black", Gadget, sans-serif;
font-size:18px;
color:#FFF;
letter-spacing:-1px;
}

.headers {
font-family:"Arial Black", Gadget, sans-serif;
font-size:18px;
color:#FFF;
letter-spacing:-1px;
padding-left:10px;
}

.description {
background-color:#665b4b;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFF;
padding-left:10px;
}

jwize
09-19-2009, 02:42 PM
Change the background color of your header div. Everythings seems to be working fine. An image along with Arnold clark is clearing the red fine.