user1577114
Reputation: 1
Space between div tags
ok so ive been trying and seraching forums to understand how i can get rid of the space between my divs for example
https://i.sstatic.net/TVNrE.png (my website currently) i would like to remove the space between the footer and the disclaimer
my html code
<!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>Testimonials</title>
<link rel="stylesheet" type="text/css" href="css.css"
/>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet'
type='text/css'>
</head>
<body>
<!-- HEADER -->
<center>
<div id="header"></div>
<table width="70%" bgcolor="#FFFFFF">
<tr>
<td width="40%">
<img src="images/woodslandscapinglogo2.jpg" width="400" height="124" alt="woods landscaping logo">
</td>
<td width="60%"></td>
</tr>
</table>
</div>
</center>
<!-- END OF HEADER -->
<!-- NAV BAR -->
<div id="container">
<ul id="nav">
<li class="active"><a href="contactus.html"><span>Contact us</span></a>
</li>
<li><a href="testimonials.html"><span>Testimonials</span></a>
</li>
<li><a href="gallery.html"><span>Gallery</span></a>
</li>
<li><a href="aboutus.html"><span>About us</span></a>
</li>
<li class="last"><a href="woodslandscaping.com.au"><span>Home</span></a>
</li>
</ul>
</div>
<!-- END OF NAV BAR -->
<!-- CONTENT -->
<div id="secondcontainer">
<div id="content" style="width:60%;height:500px;float:left;">
<center>
<h2>About us</h2>
<hr>
<h4>Here at Woods Landscaping, We provide the highest quality landscapes with all the newest and most efficient techniques. There is no job that is too big or small for us, as we have done large areas of schools, to just front and backyards and we do this at great affordable prices.
We can provide a range of landscapes that can include:
<ul><li>Paving</li>
<li>Decking</li>
<li>Retaining walls</li>
<li>Water Features</li>
<li>Irrigation</li>
<li>Instant Turf</li>
<li>Synthetic Turf</li>
<li>Garden Lighting</li>
<li>Rock Walls</li>
<li>Earth Works</li>
<li>Concreting</li>
<li>General Soft Landscaping</li>
<li>Maintenance Service</li></ul>
So take your pick and call now for a free quote!
Remember, there is no job too big or small that we can’t handle.
</h4>
</div>
<div id="images" style="width:40%;height:500px;float:left;">
<img src="images/brighton-1.JPG" alt="" width="298" height="172">
<img src="images/croydon-2.JPG" alt="" width="298" height="172">
</div>
</div>
<!-- END OF CONTENT -->
<!-- FOOTER -->
<div id="footer" style="height:30px;">
<h3><br>
Ferntree gully 3156 VIC // abn. 47402024689 // p. 043 359 7007 // e. [email protected]</h3>
</div>
<!-- END OF FOOTER -->
<!-- DISCLAIMER -->
<div id="disclaimer" style="height:20px;">
<h5><br>© 2013 Woods Landscaping, Inc. All rights reserved. </h5>
</div>
<!-- END OF DISCLAIMER -->
</body>
</html>
and my css
@import url(http://fonts.googleapis.com/css?family=Capriola);
body
{
margin-left:auto;
margin-right:auto;
margin: 0 0 10px;
background-image:url('images/background.jpg');
}
h1
{
/* main grey heading*/
font size: 15pt;
font-family: Georgia, "Times New Roman", Times, serif;
color:#999999;
text-align: left;
}
h2
{
/* main gray heading*/
font-size: 15pt;
font-family: Georgia, "Times New Roman", Times, serif;
color:#999999;
text-align: left;
}
h3
{
/* smaller footer writing*/
font-size: 6pt;
font-weight: 400;
font-family: 'Droid Sans', sans-serif;
color:#4D4D4D;
text-align: center;
}
h4
{
/* main writing*/
font-size: 10pt;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: 400;
color:#999999;
text-align: left
}
h5
{
/* smaller disclaimer writing*/
font-size: 6pt;
font-weight: 400;
font-family: 'Droid Sans', sans-serif;
color:#999999;
text-align: right;
}
td
{
vertical-align:bottom;text-align:left;
}
#header
{
width: 70% ;
background-color:#FFF;
}
#nav {
width: 100%;
float: right;
list-style: none;
background-image: url('images/linkbar.png');
}
#nav li {
float: right;
padding-right: 40px; }
#nav li a {
display: block;
padding: 8px 15px;
color:#ffffff;
font-family:Trebuchet MS, "Helvetica", sans-serif;
font-size: 0.75em;
text-align: ;
text-decoration: none;
}
#nav li a:hover {
color:#17AF49;
background-color: #ffffff;
}
#container{
width:70%;margin:0 auto;text-align:center;
}
#secondcontainer{
width:70%;margin:0 auto;text-align:center;
background-color: #ffffff;
}
#content
{
width: 60%;
margin-left: auto ;
margin-right: auto ;
margin-top:0;
background-color:#FFF;
}
#images
{
width: 40%;
margin-left: auto ;
margin-right: auto ;
margin-top:0;
background-color:#FFF;
}
#footer {
background-color:#808080;
width: 70%;
margin-left: auto ;
margin-right: auto ;
clear:both;
text-align:center;
}
#disclaimer {
background-color:#4D4D4D;
width: 70%;
margin-left: auto ;
margin-right: auto ;
clear:both;
text-align:center;
}
</style>
Upvotes: 0
Views: 3126
Answers (4)
Jonathan
Reputation: 5993
You could be to remove the top/bottom margins from the h3 and h5 within footer and disclaimer respectively as such:
#footer h3, #disclaimer h5 {
margin:0 auto; /* auto reflects the settings you've already defined */
}
Q. Have you considered restructuring the HTML to be more standards friendly and consistent across browsers?
Upvotes: 0
omma2289
Reputation: 54629
The space comes from the <h5> tag inside the #disclaimer which browser's add a default margin to, add this to your CSS
#disclaimer h5{
margin: 0;
}
Upvotes: 1
Clément Malet
Reputation: 5090
You've to set a margin:0 to your H3 and H5 tags and use the margin properties to place your headers in the div.
Moreover, using <br> to insert spaces is kinda bad. Browsers don't give the same size to the new line inserted by this tag and results can be messy.
Upvotes: 0