Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    23
    Thanks
    4
    Thanked 0 Times in 0 Posts

    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>
    Code:
    #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;
    	
    		
    }

  • #2
    New Coder
    Join Date
    Oct 2011
    Posts
    23
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I thought div's automatically spanned the width of the website?

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    It's because the div is floated. Take the float off #centrelower (and remove the height from #content) and it will extend.

  • #4
    New Coder
    Join Date
    Oct 2011
    Posts
    23
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks that worked. But now I can't get the bottom of div 'rightlower' to align with the bottom of the div 'maincontent' ??

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    Oct 2011
    Posts
    23
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks. How about if I want rightlower to be same width as rightcontent and below rightcontent?

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by bradz1993 View Post
    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 -
    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;
    }
    #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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New Coder
    Join Date
    Oct 2011
    Posts
    23
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by bradz1993 View Post
    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 -
    Code:
    #content {
    	background: #98BF21;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •