Welcome to WebmasterWorld Guest from

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)

New User

5+ Year Member

joined:Oct 12, 2010
posts: 3
votes: 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,

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

Full Member

joined:July 31, 2005
votes: 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)

Junior Member

5+ Year Member

joined:July 27, 2010
posts: 54
votes: 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:
font-family:Tahoma, Geneva, sans-serif;
margin:0 auto 0 auto;
border:1px solid #F00;
border:1px solid #0F0;
margin:0 20px 0 20px;
border:1px solid #00F;
margin:0 auto 0 auto;
border:1px solid #999;
border:1px solid #666;
border:1px solid #000;
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Untitled Document</title>

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

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

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

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

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

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

--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)

New User

5+ Year Member

joined:Oct 12, 2010
posts: 3
votes: 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,


Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members