Can't give div (block) to stretch across whole width
I can't seem to get one of my div's (#centrelower) to stretch across the whole width of website.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Capability Berwick: Home</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">
<meta name="keywords" content="landscape maintenance, gardening, kent, capability berwick">
<meta name="description" content="Capability Berwick - Landscape Maintenance">
<meta name="author" content="Bradley Berwick">
<style type="text/css">
#maincontent
{
width: 600px;
padding: 30px 10px 0px 10px;
background-color:#7A991A;
overflow: auto;
color: #ffffff;
float:left;
height: 100%;
}
#rightcontent
{
padding: 80px 10px 0px 10px;
background-color:#98BF21;
height: 60%;
color: #000;
overflow: auto;
border-left: 1px solid black;
}
#rightlower
{
overflow: auto;
height: 19.5%;
background-color: yellow;
color: red;
border-left: 1px solid black;
border-top: 1px solid black;
padding: 10px 10px 0px 10px;
}
#container
{
border: 1px solid black;
}
#centrelower
{
height: 30%;
background-color: blue;
color: white;
clear:both;
overflow:auto;
float: left;
}
#content
{
height: 300px;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<div id="header">
<h1>
Capability Berwick
</h1>
</div>
<div id="topnav">
<ul>
<li><a href="index.html" > <span class="currentpage"> Home </span> </a>
<li><a href="services.html" >Services</a>
<li><a href="gallery.html" >Gallery</a>
<li><a href="contact.html" >Contact Us</a>
</ul>
</div>
</div>
<div id="content">
<div id="maincontent">
<h2>
Home
</h2>
<p>
About Us
</p>
<p>
Capability Berwick is a small landscape maintenance company situated in the South-east of London in the borough of Bexley. The company's services covers a wide of range of work from mowing lawns and trimming back trees to block paving driveways and building walls. The company insists on providing high-quality services but at an affordable price.
</p>
</div>
<div id="rightcontent">
<p>
Brief History
</p>
<p>
Capability Berwick was started in 1985 by David Berwick. David in his previous years had worked for Bexley council, where he maintained the lawns of the local parks, schools and verges. He then went onto work for a building firm, where he learnt many of his building skills such as brickwork. 'Capability Berwick' started off by just moving the lawns of local customers and over the years as the companies reputation has grown so has its customer base, which now is over 200 regular customers.
</p>
</div>
<div id="rightlower">
<p>
Add content</p>
</div>
<div id="centrelower">
<p>
Add content</p>
</div>
</div>
<div id="footer">
<div id="mailto"> Last updated on 28th Oct 2011<br>
Maintained by <a href="mailto:berwick_bradley@mail.com">
Bradley Berwick</a>
</div>
</div>
</div>
</body>
</html>
Hello bradz1993,
To get #rightlower to follow #maincontent, they should share a containing element.
Look at this -
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Capability Berwick: Home</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">
<meta name="keywords" content="landscape maintenance, gardening, kent, capability berwick">
<meta name="description" content="Capability Berwick - Landscape Maintenance">
<meta name="author" content="Bradley Berwick">
<style type="text/css">
#top {
margin: 0;
background: #fff;
clear:both;
border-bottom: 1px solid black;
}
#header {
background: #7A991A;
padding: 20px;
border-bottom: 1px solid black;
}
#header h1 {
margin: 0;
color: #FFFFFF;
font-family:"Broadway";
font-size:40px;
}
#topnav ul {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
#container {
border: 1px solid black;
}
#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;
}
#maincontent h2 {
color: #EBDDE2;
font-size: 160%;
}
#footer {
background: #98bf21;
height: 100px;
clear: both;
border-top: 1px solid black;
}
#mailto {
font-style: italic;
font-weight: bold;
height: 40px;
padding: 30px 0 0 1000px;
}
#newmaincontent {
width: 600px;
float: left;
background: #7A991A;
color: #fff;
}
#maincontent {padding: 30px 10px 0px 10px;}
#rightcontent {
padding: 80px 10px 0px 10px;
height: 60%;
color: #000;
overflow: auto;
border-left: 1px solid black;
}
#rightlower {
overflow: auto;
height: 19.5%;
background-color: yellow;
color: red;
border-left: 1px solid black;
border-top: 1px solid black;
padding: 10px 10px 0px 10px;
}
#container {
border: 1px solid black;
}
#centrelower {
height: 30%;
background-color: blue;
color: white;
clear:both;
overflow:auto;
}
#content {
background: #98BF21;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<div id="header">
<h1> Capability Berwick </h1>
</div>
<div id="topnav">
<ul>
<li><a href="index.html" > <span class="currentpage"> Home </span> </a>
<li><a href="services.html" >Services</a>
<li><a href="gallery.html" >Gallery</a>
<li><a href="contact.html" >Contact Us</a>
</ul>
</div>
</div>
<div id="content">
<div id="newmaincontent">
<div id="maincontent">
<h2> Home </h2>
<p> About Us </p>
<p>
Capability Berwick is a small landscape maintenance company situated in the South-east of
London in the borough of Bexley. The company's services covers a wide of range of work from
mowing lawns and trimming back trees to block paving driveways and building walls. The
company insists on providing high-quality services but at an affordable price.
</p>
<!--end maincontent--></div>
<div id="rightlower">
<p> Add content to #rightlower</p>
</div>
<!--end newmaincontent--></div>
<div id="rightcontent">
<p> Brief History </p>
<p> Capability Berwick was started in 1985 by David Berwick. David in his previous years had worked for Bexley council, where he maintained the lawns of the local parks, schools and verges. He then went onto work for a building firm, where he learnt many of his building skills such as brickwork. 'Capability Berwick' started off by just moving the lawns of local customers and over the years as the companies reputation has grown so has its customer base, which now is over 200 regular customers. </p>
<!--end rightcontent--></div>
<div id="centrelower">
<p> Add content to #centerlower</p>
</div>
</div>
<div id="footer">
<div id="mailto"> Last updated on 28th Oct 2011<br>
Maintained by <a href="mailto:berwick_bradley@mail.com"> Bradley Berwick</a> </div>
</div>
<!--end container--></div>
</body>
</html>
Cheers. Sorry to be a pain in the *** but now I've got a little bit of the different shade of green content background colour below the maincontent block.
Cheers. Sorry to be a pain in the *** but now I've got a little bit of the different shade of green content background colour below the maincontent block.
Before you post, read our: 
