Container Div not getting bigger with auto height

liamloveslearning · July 16, 2009

Hi everyone, Im currently building a website, and im sure im missing something but my container div isnt getting bigger in height the more text i add to the rest of the page, ive set it to auto height only this only increases the height when i alter 1 div, not all; i dont think ive explained this properly, but in simple temrs i want the wrapper div height to cover all other divs?

css

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

body {
margin:0;
background-color: #F4F4F4;
}

#wrapper {
width:930px;
height:auto;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top:20px;
background-color: #FFFFFF;
position: relative;
}
#brwsr {
height: auto;
width: 100%;
}


#header {
width:900px;
height:117px;
background-image: url(images/hdr.jpg);
background-repeat: no-repeat;
margin-right: auto;
margin-left: auto;
}

#nav {
width:900px;
height:70px;
background-image: url(images/nav.jpg);
background-repeat: no-repeat;
margin-right: auto;
margin-left: auto;
margin-bottom: 10px;
}
#blusq {
background-image:url(images/blusq.jpg);
background-repeat:no-repeat;
color:#FFFFFF;
float:left;
font-family:Arial,Helvetica,sans-serif;
font-size:14px;
font-weight:bold;
height:253px;
margin-top:5px;
padding:0 20px 20px;
width:252px;
}
h4 {
font-size: 18px;
}


#nav ul {
display: inline;
height: 45px;
}

#nav  li {
height:42px;
font-family: Arial, Helvetica, sans-serif;
float: left;
margin-right: 10px;
display: block;
width: auto;
list-style-type: none;
font-size:12px;
font-weight: bold;
color: #97B8FF;
line-height: 40px;
margin-left: 10px;
padding-left: 20px;
padding-right: 20px;

}


#content {
width: 900px;
margin-right: auto;
margin-left: auto;
height: auto;
}
#leftCol {
width: 290px;
float: left;
margin-right: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
height: auto;
}
h2 {
font-size: 16px;
font-weight: bold;
color: #CC0000;
}

#rightCol {
float: right;
width: 590px;
}
#footer {
height: 40px;
width: 900px;
background-color: #006666;
float: right;
margin-top: 20px;
}


#sq {
float: right;
height: 273px;
width: 292px;
background-image: url(images/sq.jpg);
background-repeat: no-repeat;
height:233px;
height:253px;
margin-top:5px;
padding:0 20px 20px;
width:252px;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-weight: bold;
font-size: 14px;
}

source

<!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>PC Support</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="brwsr">
<div id="wrapper">
<div id="header"></div>
<div id="nav">
<ul>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>
</div>
<div id="content">
<div id="leftCol"><img src="images/glassbutton.gif" width="296" height="109" alt="** PLEASE DESCRIBE THIS IMAGE **" /><br />
<img src="images/glassbutton.gif" width="296" height="109" alt="** PLEASE DESCRIBE THIS IMAGE **" /><br />
<h2>Award Winning IT Support!</h2>
The PC Support Group - Named as one of the world's Top 100 IT Service Providers according to an independent survey in 2008 and shortlisted for best SME IT Solution category in the recent Channel Network Awards.<br />
<br />
<h2>What Our Customer's Think...</h2>
<em>"It is very rare that I come across a company these days that exceeds my expectations. Since finding The PC Support Group my business world has changed. I genuinly believe you guys are the very best in the IT support business"</em><br />
<strong>Rob Doran - MD - Rest & Relax Transfers UK</strong><br />
<br />
<em>"If you don't use The PC Support Group for your IT support then you need to. If you don't think you need to, trust me you do!"</em><br />
<strong>Greg Pye - Body Solutions</strong><br />
<br />
<em>"All I have to do is pick up the phone and the problem is sorted. I particularly like the weekly computer health check and that on nearly all occasions the problem can be fixed remotely. I have no hesitation at all in recommending The PC Support Group"</em><br />
<strong>Hazel Cheal - Anglian Will Writing</strong></div>
<div id="rightCol"><img src="images/flash-test.jpg" width="589" height="208" alt="** PLEASE DESCRIBE THIS IMAGE **" />
<div id="sq">
<h4>Business IT Support</h4>
The perfect small business IT support solution - corporate quality service levels, delivered by locally based professionals to give you personal, flexible support, at a price you can afford. If you have between 1 and 100 PCs we have the ideal service for you.</div>
<div id="blusq">
<h4>Home PC Support</h4>
Have you ever wished you had a computer expert available at the flick of a switch, ready to solve your problems? Well look no further! We have professional, friendly engineers ready to help over the phone right now, or visit your home, often within hours.</div>
</div>
<div id="footer">sdfsd</div>
</div>
</div>
</div>
</body>
</html>

haku · July 16, 2009

If all your elements inside the wrapper are floated, add:

overflow:auto;

to the wrapper. If they aren't all floated, show us the rest of your code.

liamloveslearning · July 17, 2009

would it be good practice to float them all? and thats all the code I have so far...

Sign In

Container Div not getting bigger with auto height

Recommended Posts

liamloveslearning

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

liamloveslearning

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information