...

View Full Version : Background does not all the way down



bradz1993
10-29-2011, 05:48 PM
The background color does not cover the rest of the images. There is just white where there should be green.




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15"/>


<!-- The external style sheets -->
<link rel="stylesheet" type="text/css" href="mystyle.css">

<style type="text/css">
div.img
{
margin:2px;
border:1px solid #ffffff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:2px;
border:1px solid #ffffff;
}

div.description
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}




#line2
{
clear : left;
}










</style>

<meta name="keywords" content="landscape maintenance, gardening, kent, capability berwick">
<meta name="description" content="Capability Berwick - Landscape Maintenance">
<meta name="author" content="Bradley Berwick">
</head>


<body>

<div id="top">
<div id="header">
<h1>
Capability Berwick
</h1>
</div>

<div id="topnav">
<ul>
<li><a href="index.html" > Home </a>
<li><a href="services.html" >Services</a>
<li><a href="gallery.html" ><span class="currentpage">Gallery</span></a>
<li><a href="contact.html" >Contact Us</a>

</ul>
</div>

</div>

<div id="content">
<h2>
Gallery
</h2>




<div class="img">

<img src="test.jpg" alt="Block Paving" width="110" height="100" />
</a>
<div class="description">Add a description of the image here</div>
</div>
<div class="img">

<img src="test.jpg" alt="Brick Wall" width="110" height="100" />
</a>
<div class="description">Add a description of the image here</div>
</div>
<div class="img">

<img src="test.jpg" alt="Wood decking" width="110" height="100" />
</a>
<div class="description">Add a description of the image here</div>
</div>
<div class="img">

<img src="test.jpg" alt="Garden Clearance" width="110" height="100" />
</a>
<div class="description">Add a description of the image here</div>
</div>
<div class="img">

<img src="test.jpg" alt="Garden Clearance" width="110" height="100" />
</a>
<div class="description">Add a description of the image here</div>
</div>

<div id="line2">
<div class="img">

<img src="test.jpg" alt="Garden Clearance" width="110" height="100" />
</a>
<div class="description">Add a description of the image here</div>
</div>
<div class="img">

<img src="test.jpg" alt="Garden Clearance" width="110" height="100" />
</a>
<div class="description">Add a description of the image here</div>
</div>
<div class="img">

<img src="test.jpg" alt="Garden Clearance" width="110" height="100" />
</a>
<div class="description">Add a description of the image here</div>
</div>
<div class="img">

<img src="test.jpg" alt="Garden Clearance" width="110" height="100" />
</a>
<div class="description">Add a description of the image here</div>
</div>
<div class="img">

<img src="test.jpg" alt="Garden Clearance" width="110" height="100" />
</a>
<div class="description">Add a description of the image here</div>
</div>
</div>
</div>


<div id="footer">
<div>Last updated on 28th Oct 2011<br>
Maintained by <a href="mailto:berwick_bradley@mail.com">
Bradley Berwick</a>
</div>
</div>



</body>
</html>






#top
{
margin: 0;
background: #fff;
}

#header
{
background: #7A991A;
padding: 20px;
}

#header h1
{
margin: 0; color: #FFFFFF; font-family:"Broadway"; font-size:40px;
}


#topnav ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}

#topnav li
{
float:left;
width: 25%;
}

#topnav a {
background-color: #98BF21;
color: #FFFFFF;
display: block;
font-weight: bold;
padding: 5px 0;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 100%;
}

#topnav a:hover
{
background-color:#7A991A;
}



.currentpage
{
font-style:italic;
}



#content
{
clear: left;
padding: 20px;
background-color:#7A991A;
}

#content h2
{
color: #000;
font-size: 160%;
margin: 0 0 .5em;
}



#footer
{
background: #98bf21;
text-align: right ;
padding: 0;
height: 70px;
clear: both;

}

#footer div
{
font-style: italic;
padding: 15px 5px 0px 5px;
}

Excavator
10-29-2011, 05:56 PM
Hello bradz1993,
You need to clear the floats in #content.
Try this -

#content
{
clear: left;
padding: 20px;
background-color:#7A991A;
overflow: auto;
}

See this explanation of how overflow: auto; clears your floats (http://www.quirksmode.org/css/clearing.html).

bradz1993
10-29-2011, 07:31 PM
Thanks, work properly now :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum