SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict XiledWeb's Avatar
    Join Date
    May 2005
    Location
    Nashville
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    100% background colour in left div

    Quite a common question judging by some of the threads I've read looking for the answer.

    I have my float left but the 100% height goes as far as the content - not the entire page. I want the background colour to stretch the length of the entire div.

    Site here.

    Code:
    * {margin:0;padding:0}
    h1,h2,h3,h4,p {margin-bottom:1em}
    ul{margin-left:16px}
    
    /* mac hide \*/
    html,body{height:100%;}
    /* end hide*/
    body { 
    	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    	font-size : 11px;
    	background:#ccccff; 
    	color:#000;
    	text-align:center;
    }
    #outer{
    	min-height:100%;
    	width:765px;
    	margin-left:auto;
    	margin-right:auto;
    	background:transparent url(images/3-colcentred-bluewhite.gif) repeat-y center top;
    	text-align:left;
    	border-left:2px solid #fff;
    	border-right:2px solid #fff;
    	position:relative;
    }
    * html #outer {
    	width:771px;
    	w\idth:765px;
    	height:100%;
    }
    #header, #footer{
    	background:#ffffcc;
    	border-top:5px solid #fff;
    	border-bottom:5px solid #fff;
    	text-align:center;
    }
    #footer{
    	position:absolute;
    	bottom:0;
    	left:0;	
    	width:765px;
    	height:40px;
    }
    * html #footer {
    	height:50px;
    	he\ight:40px;
    	bottom:-1px;
    }
    #clearfooter {
    	clear:both;
    	height:50px;
    }
    #content {
    	float:left;
    	padding:2px;
    }
    #left {
      float:left;
      background-color:#e4e0cd;
      width:180px;
    }
    #content{width:500px;}
    .clearer{
    	height:1px;
    	overflow:hidden;
    	clear:both;
    	margin-top:-1px;
    }

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Have a look at the templates on pmob.co.uk, this one in particular I think is probably what you're after: http://www.pmob.co.uk/temp/2colcentred_contentfirst.htm

    Also note the one that uses a background image to achieve the same effect: http://www.pmob.co.uk/temp/2_col_centred_imgbg.htm

    Faux Columns is quite a famous article that solves your problem: http://alistapart.com/articles/fauxcolumns/

    But I prefer the other method (the first link).

  3. #3
    SitePoint Addict XiledWeb's Avatar
    Join Date
    May 2005
    Location
    Nashville
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So what you're saying is, I can only have the background colours height at 100% if its an image? Surely that can't be?

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    No, you can do it without them. Have a look at this: http://www.cssplay.co.uk/layouts/threecol.html
    It's 3 columns, but the same principle applies.

  5. #5
    SitePoint Addict XiledWeb's Avatar
    Join Date
    May 2005
    Location
    Nashville
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, so I bit the bullet and went with a background image. I used a gif and got it to repeat. But I'm still not getting the full 100% height effect.

    Code:
    * {margin:0;padding:0}
    h1,h2,h3,h4,p {margin-bottom:1em}
    ul{margin-left:16px}
    
    /* mac hide \*/
    html,body{height:100%;}
    /* end hide*/
    body { 
    	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    	font-size : 11px;
    	background:#ccccff; 
    	color:#000;
    	text-align:center;
    }
    #outer{
    	min-height:100%;
    	width:765px;
    	margin-left:auto;
    	margin-right:auto;
    	background:transparent url(images/3-colcentred-bluewhite.gif) repeat-y center top;
    	text-align:left;
    	border-left:2px solid #fff;
    	border-right:2px solid #fff;
    	position:relative;
    }
    * html #outer {
    	width:771px;
    	w\idth:765px;
    	height:100%;
    }
    #header, #footer{
    	background:#ffffcc;
    	border-top:5px solid #fff;
    	border-bottom:5px solid #fff;
    	text-align:center;
    }
    #footer{
    	position:absolute;
    	bottom:0;
    	left:0;	
    	width:765px;
    	height:40px;
    }
    * html #footer {
    	height:50px;
    	he\ight:40px;
    	bottom:-1px;
    }
    #clearfooter {
    	clear:both;
    	height:50px;
    }
    #content {
    	float:left;
    	padding:2px;
    }
    #left {
      min-height:100%;
      width:180px;
      float:left;
      background:url(images/left_navbg.gif) repeat-y left top;
    }
    #content{width:500px;}
    .clearer{
    	height:1px;
    	overflow:hidden;
    	clear:both;
    	margin-top:-1px;
    }

  6. #6
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When using faux columns, the bg-image goes on the container of all the columns, not on one of the columns.

  7. #7
    SitePoint Addict XiledWeb's Avatar
    Join Date
    May 2005
    Location
    Nashville
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tyssen
    When using faux columns, the bg-image goes on the container of all the columns, not on one of the columns.
    That did it - thank you!


Bookmarks

Posting Permissions

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