PDA

View Full Version : content div not expanding


midnightstudio
22 Jul 2010, 07:18 AM
I can't understand why the #content isn't expanding when I put divs inside. Please can someone help?


body {
background:url(../images/site-bg.png) repeat-x scroll 0 0 #FFF;
color:#ffffff;
margin:0;
padding:0;
}
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#top{
background:url(../images/top.jpg) no-repeat scroll left top transparent;
height:6px;
margin:0 auto;
width:816px;
}
#content{
background:url(../images/content-bg.png);
background-repeat:repeat-y;
padding:10px;
padding-top:0px;
margin:0 auto;
width:809px;
}
#logo {
float:left;
width:63px;
margin:15px;
}
#strapline h1{
margin-top:30px;
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:22px;
color:#110646;

}

#access{
float:right;
margin:0;
width:240px;

}

.join {
float:left;
margin-right:5px;
width: 107px;
height: 29px;
background: url(../images/join-rollover.gif) no-repeat 0 0;
}



.join:hover
{
background-position: 0 -29px;
}

.join span
{
display: none;
}

.login {
float:left;

width: 107px;
height: 29px;
background: url(../images/login-rollover.gif) no-repeat 0 0;
}



.login:hover
{
background-position: 0 -29px;
}

.login span
{
display: none;
}





<!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></title>
<link rel="icon" type="image/jpg" href="/favicon.jpg" />



<!-- META -->
<meta name="description" content="" />
<meta name="" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- CSS -->

<link href="../css/styles.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="top"></div>
<div id="content">

<div id="logo"><img src="../images/logo.gif" width="63" height="64" alt="If I were you" /></div>
<div id="strapline"><h1>The pioneering financial community</h1></div>

<div id="access">
<div class="join"><a class="join" href="#" title="Join today"><span>Join today</span></a></div>
<div class="login"><a class="login" href="#" title="Login"><span>Login</span></a></div>

</div>


</div>

</body>
</html>
<CrGeary.com/>
22 Jul 2010, 11:11 AM
I think ( at least it looks like ) its because you have the elements inside it ( the #logo and the #strapline ) floated left.

If you float something, for some reason the wrapper closes back up so to speak, unless you clear the float after. Strange way of doing it if you ask me.

after your 2 floated elements, but inside of the #container add:



<div style="clear:both;"></div>


or you can make a .clear class and add that way ( that's the most common method )