Welcome to WebmasterWorld Guest from 174.129.151.95

Forum Moderators: not2easy

Message Too Old, No Replies

Cannot Get Column to a 100% height

Column Height Not Reaching Bottom of the page

   
7:59 pm on Oct 12, 2010 (gmt 0)



Hello All:

I am working on a site at this web address here, [kardwelldev.com ].

No matter what I do, so it seems, I cannot get that left column with the menu items in it to reach the bottom of a page.

I want that column to adjust with the height of the content on the right side of the page.

I have tried min-height:100% but it does not seem to have any effect for me,

Thanks for any help or advice on this,

Paul
2:08 am on Oct 13, 2010 (gmt 0)



Might help to look at this code:

CSS Three Column Liquid Layout with 100% Height Divs [bigbaer.com]

A good read: Faux Columns [alistapart.com]
7:04 am on Oct 13, 2010 (gmt 0)



hi! i would recommend that you put your site in div's instead of table td, and to be able to do what you wanted here it is:
---css---
{margin:0;padding:0;}
body{
width:100%;
font-family:Tahoma, Geneva, sans-serif;
}
#wrapper{
width:960px;
margin:0 auto 0 auto;
padding:0;
border:1px solid #F00;
}
#header{
height:100px;
border:1px solid #0F0;
margin:0 20px 0 20px;
}
#nav{
border:1px solid #00F;
}
#container{
margin:0 auto 0 auto;
padding:2px;
}
.left{
float:left;
width:300px;
border:1px solid #999;
}
.middle{
width:600px;
margin-left:320px;
border:1px solid #666;
}
footer{
border:1px solid #000;
}
--index--
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Untitled Document</title>
</head>

<body>
<div id="wrapper"><!--wrapper-->
<div id="header"><!--header-->
header
</div><!--end of header-->
<div id="nav"><!--nav-->
navigation
</div><!--end of nav-->
<div id="container"><!--container-->
<div class="left">
left column


</div>
<div class="middle"><!--middle-->
middle
<div class="content"><!--content-->
content here!


</div><!--content here-->

<footer><!--footer-->
footer
</footer><!--end of footer-->
</div><!--end of middle-->


</div><!--end of container-->

</div><!--end of wrapper-->
</body>
</html>

--footer is along with middle class, left's height is up to bottom-->try putting lorem ipsum on div's to see what it look's like.hope this will help you :D
12:31 pm on Oct 13, 2010 (gmt 0)



THanks Guys for the help,

This helped me sort it all out. I found out that CSS does not do height all that well, like when you want it to fill in 100% so I just did an image repeat all the way down with 0 margin.

Thanks agian,

Paul