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 3 of 3
  1. #1
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Simple problems with CSS backgrounds

    Hello

    I have a problem with the structure of my site.

    Because the colums is set at auto height they won't reach all the way to the bottom of the page (see picture):



    The site structure goes as follows:

    Code:
    <div id="wrapper">
         <div id="header">
         </div>
              <div id="main">
                   <div id ="leftcolumn">
                   </div>
                   <div id ="centercolumn">
                   </div>
                   <div id ="rightcolumn">
                   </div>
              </div>
         <div id="footer">
         </div>
    </div>
    And this is the CSS code:

    Code:
    #wrapper {
    	width:1000px;
    	margin-left:auto;
    	margin-right:auto;
    	background-color:#ebebeb;
    }
    
    #header {
    	width:1000px;
    	height:225px;
    	background-image:url(../images/header.png);	
    }
    
    #main {
    	width:1000px;
    	min-height:600px;
    	background-color:#ebebeb;
    	margin-bottom:0px;	
    }
    
    #leftcolumn {
    	float:left;
    	width:180px;
    	padding-left:35px;
    	padding-right:25px;
    	background-color:#ebebeb;
    	margin-bottom:0px;
    }
    
    #centercolumn {
    	float:left;
    	width:520px;
    	background-color:#ebebeb;
    	margin-bottom:0px;
    }
    
    #rightcolumn {
    	float:left;
    	width:180px;
    	padding-left:25px;
    	padding-right:35px;
    	background-color:#ebebeb;
    	margin-bottom:0px;
    }
    
    #footer {
    	float:left;
    	width:1000px;
    	background-color:#ebebeb;
    }
    Although i added background color to all divs i still get the white spaces?

    Can anyone help me out?

    Thanks in advance

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    You need to clerar you floats at the end of #main. Try:

    Code:
    #main {
    	width:1000px;
    	min-height:600px;
    	background-color:#ebebeb;
    	margin-bottom:0px;
    	overflow:auto;
    }

  • #3
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    You need to clerar you floats at the end of #main. Try:

    Code:
    #main {
    	width:1000px;
    	min-height:600px;
    	background-color:#ebebeb;
    	margin-bottom:0px;
    	overflow:auto;
    }
    You're a champ

    Not sure i really get these flows now, but it sure worked


  •  

    Posting Permissions

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