#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Posts
    448
    Rep Power
    12

    CSS layout not looking right


    My layout is pretty simple. 1 large columb in the center that should extend the full length of the browser(minimum) regardless of how much text is in it. 1 column on either side of it for other content.

    I cannot get the middle column to extend to 100%. it stops at the data. Here is my CSS.

    Code:
    body {
    	margin: 0;
    	padding: 0;
    	font-size: 12px;
    	font-family: 'Trebuchet MS', 'Lucida Grande',
    	  Verdana, Lucida, Geneva, Helvetica, 
    	  Arial, sans-serif;
    	background-color: #C10E0E;
    }
    
    #leftcolumn {
    	display: inline;
    	float: left;
    	left: 15%; 
    	width: 150px; 
    }
    
    #centercolumn {
    	float: left;
    	width: 511px;
    	height: 100%;
    	margin-left: 2px; 
    	padding: 8px;
    	border-left: 1px solid #494949;
    	border-right: 1px solid #494949;
    	background:  url(/images/bg.png) no-repeat top left;
    	background-color: #FFDCAA;
    }
    
    #rightcolumn {
    	float: left;
    	width: 150px;
    	margin-left: 1px; 
    } 
    
    #mainnav {
    	width: 150px;
    	padding: 0 0 0 0;
    	font-size: 12px;
    	font-family: 'Trebuchet MS', 'Lucida Grande',
    	  Verdana, Lucida, Geneva, Helvetica, 
    	  Arial, sans-serif;
    	background-color: #C10E0E;
    	color: #FFDCAA;
    }
    
    #mainnav ul {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    		
    #mainnav li {
    	margin: 0 0 0 0;
    	border-left: 7px solid #C10E0E;
    	padding: 0 5px 0 0;
    }
    
    #mainnav li a {
    	display: block;
    	height: 15px;
    	vertical-align: middle;
    	padding: 0 0 0 0;
    	margin: 0 0 0 0;
    	background-color: #C10E0E;
    	color: #FFDCAA;
    	text-decoration: none;
    	text-align: right;
    }
    
    html>body #mainnav li a {
    	width: auto;
    	padding: 0;
    	margin: 0;
    }
    
    #mainnav li a:hover {
    	background-color: #C10E0E;
    	border-left: 7px solid #FFDCAA;
    	color: #FFF;
    	padding: 0;
    	margin: 0;
    }
    	
    #mainnav h3 {
    	padding-left: 5px;
    	font-size: 14px;
    	font-weight: bold;
    	color: #F6D4A4;
    	font-style: italic;
    }
    thanks!
    -Sotonin
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    446
    Rep Power
    11
    Perhaps i'm not following but you have the middle column's width set to 511px. It won't be anywhere near 100% (assuming you're even using low resolution) until that number is increased.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    8
    Rep Power
    0
    Generally, elements only extend down as far as they need to (unless you specify a height for them). This means that a page is only as long as it needs to be. When you specify a height of 100% for an element, it will expand to the same height as it's containing element.
    But since the page is only as long as it needs to be, specifying a height of 100% for the middle column will do nothing.

    I don't know a CSS way to make something extend to the full visible page height, sorry. On the other side of the coin, no-one is going to mind if your page stops short of the bottom, so don't worry about it.

    ---------------------------

    Edit: I've just remembered an ala article that might interest you.
    Last edited by lavalamp; February 18th, 2004 at 02:34 PM.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Posts
    448
    Rep Power
    12
    Originally Posted by DZA
    Perhaps i'm not following but you have the middle column's width set to 511px. It won't be anywhere near 100% (assuming you're even using low resolution) until that number is increased.
    Height, not Width. Width is fixed.

    Thanks for that ala link. it worked great. it was so simple as adding a background image to appear as if the column were extending to the entire browser window.
    -Sotonin

IMN logo majestic logo threadwatch logo seochat tools logo