Link to home
Create AccountLog in
Avatar of designaire
designaireFlag for United States of America

asked on

css columns, can't get left column to extend.

I can't for the life I me figure out how to make this left column extend as long as the other columns. I thought the background image would work. Thanks for your help!

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Front End Coding Test</title>


<style type="text/css">
	#wrapper{
		margin: 0;
		width: 100%;
	}
	
	#content{	
		width: 975px;
		background-color:#33F;
		margin: 0 auto;
		padding-bottom: 20px;
	}

	.clearBoth{
		clear:both;
	}

	.columns{
		width: 235px;
		float: left;
		margin: 0 0px 0 5px;
		background-color:#366
	}
	
		.sidebar{
		width: 240px;
		background-color: #d8e5eb;
		float: left;
		padding: 0 0px 0 10px;
		background:#ccc url('images/height.png')repeat-y 100% 0;
	}
	
		.bottom{	
		width: 975px;
		background-color:#09C;
		margin: 0 auto;
		padding-bottom: 20px;
}
	
</style>
</head>

<body>

<div id="wrapper">

	<div id="content">
  
  
          <div class="sidebar">
                
                <p>test fdsfds fdsf dsfds fs</p>
                <p>fdsfds</p>
                <p>fdsfds</p>
              
     		</div>
	        		

    <div class="columns">
	 
    <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
          
    </div><!--end of left column-->
    
    
    <div class="columns">
         <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
    </div><!--end of middle column-->
    
    <div class="columns">
      

      <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
  

	</div><!--end of content-->
 <br class="clearBoth">
 
<div class="bottom">fdsfdsfd</div>
   
   </div><!--end of searchBy-->
</div><!--end of wrapper-->
</body>
</html>

Open in new window

Avatar of COBOLdinosaur
COBOLdinosaur
Flag of Canada image

A background is not content inside the div so it has zero to do with dimensioning.  A div without explicit height will size to the content. So give it an explicit height. depending on how the floats are used in the structure, you could also end up with a collapsed div unless you add an overflow property other than visible;

Cd&
Avatar of designaire

ASKER

The content will change so giving it an explicit height won't work.
Well then it is very simple.  It is not going to extend.  The browser cannot read your mind.  you can try putting a wrapper around the whole thing and try giving the column height 100% but the floats will complicate; some browsers will ignore it, and other browsers will get it wrong.

Or, you can try bloating the page with script to calculate the height onload and onresize and keep your fingers crossed that all the browser can handle it under all conditions without breaking.


If your design on it being the same height, then you need think about alternatives that might produce a more reliable result.

Cd&
Equal columns is sort of a contentious one. Here'e one way of doing it, which I find to NOT be too egregious (someone will undoubtedly find fault with it :) ).

Works in IE7 and up
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>

<style>
      #container { overflow: hidden; }      
      #container div { 
          float: left; 
          background: #ccc; 
          width: 200px; 
          margin-bottom: -2000px; 
          padding-bottom: 2000px; 
      }
      #container .col1 { background: red; }        
      #container .col2 { background: #eee; }	
      #container .col3 { background: blue; }  
</style>
</head>
<body>
<div id="container">
	   <div class="col1">
	      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ac lectus ac ligula cursus ullamcorper. Aliquam iaculis nonummy libero. Nulla nisi libero, faucibus quis, egestas non, congue vel, dolor. Nulla facilisi. Quisque non metus malesuada libero suscipit cursus. Nam eget metus. Aliquam non quam. Integer sit amet pede eu est gravida fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed vulputate tempus felis. Vestibulum tincidunt elit sit amet est. Sed ultricies tempus enim. Curabitur quam augue, fringilla ac, imperdiet et, dignissim sit amet, erat. Aenean ornare. Quisque turpis neque, suscipit pretium, aliquet sed, eleifend vitae, elit. Ut velit neque, venenatis non, convallis at, nonummy tincidunt, nisl. Morbi sapien.</p>
	   </div>
	   <div class="col2">
	      <p>Praesent mauris. Proin arcu. Maecenas elementum. Curabitur congue, ante ut pretium suscipit, lectus elit porttitor arcu, ac porta magna ante sit amet nulla. Suspendisse sed tellus. In eget mi in risus adipiscing lobortis. Nam lobortis ipsum quis nibh. Donec odio. Nullam fermentum, leo id condimentum viverra, augue nibh viverra dui, in placerat arcu sapien nec velit. Nunc tincidunt molestie elit. Sed est mi, posuere vitae, congue vitae, pulvinar vel, enim. Morbi vestibulum erat sed risus. Nulla facilisi.</p>
         <p>Integer nec neque. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent dictum venenatis velit. Morbi interdum eleifend sapien. Morbi a mauris. Nulla auctor varius elit. Mauris id nibh ac orci egestas gravida. Nam orci. Fusce dui. Nulla interdum pharetra mauris. Sed fermentum purus ac lectus. Vivamus et dui ac quam vehicula tristique. Cras sem. Integer non nisi commodo elit sagittis interdum.</p>
	   </div>
	   <div class="col3">
	      <p>Morbi feugiat metus sit amet urna. Etiam faucibus diam at mi egestas elementum. Mauris tempus, neque quis scelerisque lacinia, risus purus ornare enim, ut dignissim ante leo quis mauris. Maecenas pellentesque. Nulla magna metus, pretium et, scelerisque sed, faucibus lacinia, ante. Ut placerat. Phasellus a sapien. Donec porttitor tincidunt velit. Pellentesque eget sem. Duis ac sem ac sapien euismod consequat. Ut tortor urna, bibendum sed, fringilla sit amet, tempor quis, ipsum. Sed vehicula tempor nibh. Aliquam et nunc.</p>
         <p>Curabitur sapien risus, vulputate quis, lacinia eu, tincidunt ut, pede. Sed nec tortor eu quam interdum molestie. Sed sodales iaculis ligula. Sed non nulla vel nibh imperdiet elementum. Vestibulum augue lorem, cursus vel, faucibus vel, euismod in, sem. Sed vitae quam a dolor pulvinar cursus. Pellentesque molestie, libero sit amet auctor venenatis, velit odio condimentum elit, eu rhoncus justo risus a justo. Sed quis pede. Aliquam erat volutpat. Sed diam est, imperdiet at, convallis et, congue vel, ante.</p>
	   </div>
	</div>
</body>
</html>

Open in new window

SOLUTION
Avatar of Gary
Gary
Flag of Ireland image

Link to home
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
See answer
ASKER CERTIFIED SOLUTION
Link to home
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
Thanks for your help