PDA

View Full Version : Container div shrinks to 1px... pls help...


stevenradams
07-15-2009, 04:32 PM
Hello clever bods :)

Can anybody help me and explain what in the following code (or www.adamsapplemedia.co.uk) makes my container div shrink to 1px, rather than growing with the menu/content/footer divs within it?? It's making me blummin mad...!

Spot the graphic designer getting over-ambitious...

<!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" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>adamsapplemedia.co.uk</title>
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
position: relative;
}
#container {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #333;
width: 720px;
border: 1px solid #333;
position: relative;
background-image: url(../images/aam_header.png);
background-repeat: no-repeat;
background-position: center top;
margin-top: 10px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#menudiv {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: lighter;
color: #333;
float: left;
width: 125px;
margin-left: 15px;
position: relative;
margin-top: 25%;
padding-top: 8px;
padding-right: 4px;
padding-bottom: 8px;
padding-left: 12px;
}
#container p {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: lighter;
color: #333;
margin: 0px;
padding: 0px;
line-height: 18px;
}
a:link , a:visited{
color: #F90;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: F90;
text-decoration: none;
}
a:hover {
color: #FFF;
text-decoration: none;
background-color: #F90;
border-bottom: none;
}
#container #underconstruction {
margin-top: 25%;
margin-right: 75px;
margin-left: 275px;
}
#container #contentdiv {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 18px;
font-weight: lighter;
color: #333;
padding: 8px;
float: right;
width: 500px;
margin-right: 25px;
margin-top: 25%;
}
#footer {
float: right;
height: 25px;
width: 250px;
position: relative;
margin-right: 25px;
text-align: right;
clear: both;
}
-->
</style>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>

<body>
<div id="container">
<div id="menudiv">
<p><a href="#" target="_self">about</a></p>
<p><a href="#" target="_self">print</a></p>
<p><a href="#" target="_self">web</a></p>
<p><a href="#" target="_self">word</a></p>
<p><a href="#" target="_self">contact</a></p>
</div>
<!-- TemplateBeginEditable name="maincontent" -->
<div id="contentdiv">
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
<div id="footer">copyright adamsapplemedia 2009</div>
<!-- TemplateEndEditable --></div>
</body>
</html>


Please and thanks,
S

DWcourse
07-15-2009, 04:44 PM
Floated divs don't cause the height of the parent div to grow. Try adding an element (a <br /> or a div) with the property clear:both before your footer div.

stevenradams
07-15-2009, 05:19 PM
You're a saint... thank you :)