troubleshooting Question

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

Avatar of designaire
designaireFlag for United States of America asked on
JavaScriptCSSHTML
7 Comments2 Solutions400 ViewsLast Modified:
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>
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 2 Answers and 7 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 2 Answers and 7 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros