...

View Full Version : Can't give div (block) to stretch across whole width



bradz1993
10-30-2011, 11:31 AM
I can't seem to get one of my div's (#centrelower) to stretch across the whole width of website.



<!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>




#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
{
clear: left;
padding: 20px;
background-color:#7A991A;
overflow: auto;
color: #ffffff;

}

#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;


}

bradz1993
10-30-2011, 11:39 AM
I thought div's automatically spanned the width of the website?

SB65
10-30-2011, 11:50 AM
It's because the div is floated. Take the float off #centrelower (and remove the height from #content) and it will extend.

bradz1993
10-30-2011, 09:27 PM
Thanks that worked. But now I can't get the bottom of div 'rightlower' to align with the bottom of the div 'maincontent' ??

Excavator
10-30-2011, 10:30 PM
Hello bradz1993,
To get #rightlower to follow #maincontent, they should share a containing element.

Look at this -
<!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>

bradz1993
10-30-2011, 11:01 PM
Thanks. How about if I want rightlower to be same width as rightcontent and below rightcontent?

Excavator
10-30-2011, 11:14 PM
Thanks. How about if I want rightlower to be same width as rightcontent and below rightcontent?

It would be the same thing but on the other side. That must have been my dyslexia kicking in...

Try it like this -
<!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;
}
#maincontent {
width: 600px;
padding: 30px 10px 0px 10px;
float: left;
background: #7A991A;
color: #fff;
}
#newrightcontent {
color: #000;
overflow: auto;
border-left: 1px solid black;
}
#rightcontent {padding: 80px 10px 0px 10px;}
#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="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="newrightcontent">
<div id="rightcontent">
<p> Brief History </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 rightcontent--></div>
<div id="rightlower">
<p> Add content to #rightlower</p>
</div>
<!--end newrightcontent--></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>

bradz1993
10-30-2011, 11:27 PM
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.

Excavator
10-30-2011, 11:46 PM
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.

That color comes from here -

#content {
background: #98BF21;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum