Cant get vertical space between divs to go away

HTML & CSS
1

hey guys,

been working on this all day.

have created a real basic landing page at http://www.byblosgroup.com.au

The picture at the bottom wont sit on the footer div, have tried everything…can you please help me?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Byblos Group Website | Commercial Construction Company, Western Australia | Coming Soon</title>
<meta name="keywords" content="Byblos Group Constructions, Commercial Construction Company, Perth, Western Australia" />
		<meta name="description" content="Byblos Group are a Commercial Construction Company based in Paraburdoo, Western Australia">
		<meta name="author" content="pddesign.com.au">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>

<body>
<div id="container">
	<div id="header">
		<h1><a href="mailto:"><img src="img/byblos-logo-02.gif" width="944" height="112" alt="Byblos Group Constructions Coming Soon DECEMBER 2013"></a></h1>
	</div>
	<div id="navigation"></div>
	<div id="content">

    <h2>THIS WEBSITE IS CURRENTLY UNDER CONSTRUCTION</h2>

    <p> We are currently working hard to design our new online website. This will be complete in the next few weeks. In the meantime please read a little more about us below</p>

		<br>
	  <h2>About Us</h2>
		<p>
			Byblos Group Constructions have been delivering solidly built, high quality buildings in Paraburdoo for some time now. </p>

<p>Based in Paraburdoo, Western Australia Byblos Group meet the needs of governments and major corporations for offices, retail, education facilities, health centres and large-scale accommodation of every type. We’re not just constructing buildings, we’re building communities.</p>

<p>We specialise in projects in the $10-80 million range and we’re constantly striving to exceed our customers’ expectations of value for money, providing innovative building solutions that will pass the test of time.</p>

<div id="projects">
  <img src="img/project-01-small.jpg" alt="Project 01" width="250" height="166"> <img src="img/project-02-small.jpg" alt="Project 02" width="250" height="166"> <img src="img/project-03-small.jpg" alt="Project 03" width="250" height="166"> <img src="img/project-04-small.jpg" alt="Project 04" width="250" height="166"></div>
</div>

  <div id="blackline">
  <div class="text">
 <br>
<h2>Services</h2>
<p>Byblos Group Constructions offer a comprehensive range of building services covering commercial, apartment and multi-residential developments:</p>
<ul>
<li>Planning & programming</li>
<li>Design solutions</li>
<li>Constructability review</li>
<li>Approvals and documents</li>
<li>Cost estimating</li>
<li>Value engineering</li>
<li>Scheduling</li>
<li>Construction management</li>
<li>Program management</li>
<li>Quality control</li>
<li>Risk and safety management</li>
</ul>
</div>
<img src="img/website-under-construction.gif" width="600" height="333" style="padding-top:20px" alt="This website is currently under constuction">
</div>
<div id="footer"> <a href="http://www.pddesign.com.au" target="_blank"><img src="img/pddesign-comingsoon-logo-black.gif" width="502" height="66" style="text-align:right;" alt="Paul Dickson Design"></a>
	</div>
</div>
</body>
</html>

CSS

body
{
	background-color:#000;
	font-family:Arial, Helvetica, sans-serif;
	overflow:hidden;
}

#container
{
	width:100%;
	overflow:hidden;
}

#projects
{
	margin: 0 30px;
	padding: 40px;
	width: auto;
}

#header
{
	background: #FFF;
	padding: 20px;
	text-align:centre;
}

#header h1 { margin: 0; padding-bottom: 20px; }

#navigation
{
	float: left;
	width: 100%;
	height:20px;
	background: #333;
}

#construction
{
background: #FFF;

}

#blackline
{
	padding: 0 0 0 0;
	margin:0 0 0 0;
	border: 0;
    outline: 0;
	vertical-align: baseline;
	overflow:hidden;
	text-align:right;
	background-repeat: repeat;
	background-image: url(../img/graphy.png);
}

.text
{
	padding-left: 40px;
	margin:0px;
	border: 0;
    outline: 0;
	vertical-align: baseline;
	text-align:left;
	float:left;
	overflow:hidden;
}

#navigation li
{
	line-height:10px;
}

#navigation ul
{
	margin: 0;
	padding: 0;

}

#navigation ul li
{
	list-style-type: none;
	display: inline;	
}

#navigation li a
{
	display: block;
	float: left;
	padding: 5px 10px;
	color: #fff;
	text-decoration: none;
	border-right: 1px solid #fff;
}

#navigation li a:hover { background: #383; }

#content
{
	clear: left;
	padding: 40px;
	background-repeat: repeat;
	background-image: url(../img/graphy.png);
}

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

#footer
{
	background: #000;
	text-align: right;
	padding: 40px;
	height: 1%;
	overflow:hidden;
}
2

Hi,

Set the image to display:block and then it will sit on the bottom and not on the baseline (the default). The baseline is not the bottom as it leaves room for descenders in text to poke downwards without being cut off.

You could instead vertical-align:bottom to the image but that may upset other content on the same line in some situations so the display:block method is best where you don’t need inline content.

3

Paul you are amazing, that did the trick :slight_smile: