Div height doesnt go 100%

**philip** · 03-13-2012, 06:20 AM

Hello

i am switching from Flash to HTML and i am bumping into some problems that some of you here might be able to help me out

I have a <div class="middleColumn">

which is inside <div class="content_table">
and both of them are wrapped up inside the <div class="wrapper">

What i been trying to do for the past 2 hours , is to expand the height of my middleColumn to be 100% (Basically as much as the height of my content_table)

It doesnt work and its driving me crazy...is there an easy solution to this?

My HTML code is this

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">



<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Prudens Group | Welcome</title>
<link href='http://fonts.googleapis.com/css?family=Quattrocento+Sans:400,700' rel='stylesheet' type='text/css'>
<link href="my_css.css" rel="stylesheet" type="text/css" />



</head>





<body>

<div class="wrapper">





<!--**********************************----  Content Starts ----*********************************-->

<div class="content_table">


<!--******----  LeftColumn Starts ----******-->
  
    <div class="leftColumn"> 
       <div id="quicklinks">
        <ul id="quicklist">
        <li><a href="company_formation_management.html">Button_1</a></li>
        <li><a href="trustee_services.html">Button_2</a></li>
        <li><a href="accounting.html">Button_3</a></li>
        <li><a href="tax_advisory.html">Button_4</a></li>
        <li><a href="banking_services.html">Button_5</a></li>
        <li><a href="banking_services.html">Button_6</a></li>
        </ul>
        </div>
        
     
     <div class="publications">
               
	<div id="feature">
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco      
      <form name="form" id="form">
        <select name="jumpMenu" id="jumpMenu" onchange="MM_jumpMenu('parent',this,0)">
          <option>Select a publication</option>
          <option value="publications/download_1.pdf">PDF 1</option>
          <option value="publications/download_2.pdf">PDF 2</option>
          <option value="publications/download_3.pdf">PDF 3</option>
        </select>
      </form>
    </div>
    
    </div>
    </div>
     
<!--******----  LeftColumn Ends ----******-->


<!--******----  MiddleColumn Starts ----******-->


    <div class="middleColumn"> 
      <h1>Welcome
      </h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

      
      </div>

<!--******----  MiddleColumn Ends ----******-->

   
 
 
<!--******----  RightColumn Starts ----******-->  
    
        <div class="rightColumn">
         </h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>


</div>

<!--******----  RightColumn Ends ----******-->  


<!--**********************************----  Content Ends ----*********************************-->



</div>
</body>
</html>

My css code

Code:

@charset "UTF-8";
/* CSS Document */

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}


html {
	min-height: 100%;
	height: 100%; 
}



.wrapper {
	
	width: 960px;
	margin: 0 auto;
	min-height: 100%;
	height: 100%; 
}


body,td,th {
	font-size: 12px;
	color: #666;
	text-align:left;
}
body {
	font-family: Arial; 
	font-size: 12px;
	font-weight:normal;
	color: #929090;
	line-height: 142%;
	background-color: #132600;
	margin-left: 0px;
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 0px;
	min-height: 100%;
}



/* MAIN CONTENT */

.content_table{
	
	min-height: 100%;
	width: 960px;
	overflow: auto;
	
	}
	
	
.leftColumn {
	margin-top: 50px;
	padding: 0px 10px 10px 0;
	width: 290px;
	float: left;
	height: 100%;

}

.middleColumn {
	width: 290px;
	min-height: 100%;
	border-left: solid 1px #464545;
	margin: 50px 0 0 0;
	padding: 0 0 30px 35px;
	float: left;
}


.rightColumn {
	height: 100%;
	margin: 86px 0 0 35px;
	width: 290px;
	float: left;
}

.publications{
	
	height: 100%;	
	background-color: #2a2929;
	padding: 15px;
	
}


#feature {
	font-family: 'Quattrocento Sans', Arial, serif; font-weight: 400; 
	color: #fefefd;
	display: block;
	height: auto;
	font-size: 12px;
}



/* OTHER */



h1 {
	
	font-family: 'Quattrocento Sans', Arial, serif; font-weight: 400; 
	margin-top: 2px;
	font-size: 29px;
	color: #fcfbfb;
	display:block;
	padding-bottom: 10px;
	
}
h2 {
	font-family: Arial, serif;
	font-size: 12px;
	color: #929090;
}




#form{
	border-top:dotted thin #999;
	padding-top:5px;
	margin:0px;
}





/*QUICKLINKS*/


#quicklinks
{
	font-family: 'Quattrocento Sans', Arial, serif; font-weight: 400; 
	width: 100%;
	margin: 0 auto;
	padding: 0 0 15px 0;
	font-size: 12px;
}

ul#quicklist
{
text-align: left;
list-style: none;
padding: 0;
margin: 0 auto;
width: 100%;
}

ul#quicklist li
{
display: block;
margin: 0 0 0 0;
padding: 0;
background: url(http://images.htmlhelpcentral.com/messageboard/images/menu_line_white.png)no-repeat 10px 6px;
border-bottom: solid #464545 thin;
}

ul#quicklist li a
{
	
display: block;
width: 100%;
padding: 5px 0 5px 25px;
color: #f2f1f1;

text-decoration: none;
}

#quicklinks>ul#quicklist li a { width: auto; }

ul#quicklist li#active a
{
color: #fff;

}

ul#quicklist li a:hover, ul#quicklist li#active a:hover
{
color: #fff;
background: #464545 url(http://images.htmlhelpcentral.com/messageboard/images/menu_line_white.png)no-repeat 10px 6px;
}




#active a:link, #active a:visited, #active a:hover
{
color: #333;
}



#countrylist ul, ul#countrylist
{
	float:right;
	padding: 0px 0px 0px 0px;
	margin: 50px 0 0 0;
}

#countrylist li
{
	display: inline;
	list-style-type: none;
	
}

#countrylist a
{
	padding: 0px 5px 0px 5px;
	margin-left: 0px;
	border-right: thin solid #666;
}


#active a:link, #active a:visited, #active a:hover
{
color: #ccc;
}

what am i doing wrong?

Many thanks for taking the time to read this
Philip

» Search Forums

» Online Users: 76

» Site Navigation

» Domains For Sale

Thread: Div height doesnt go 100%

Thread Tools

Search Thread

Display

Div height doesnt go 100%

Similar Threads

How do i fit text from menu so it doesnt show under un Dreamweaver.

Why doesnt anyone want ledgible 'memerable domains anymore?

My page is now garbled, doesnt look good, bout to blow!!

How do I put up pictures on a site if it doesnt have a file manager?

Posting Permissions