homepage Welcome to WebmasterWorld Guest from 54.145.238.55
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Cannot Get Column to a 100% height
Column Height Not Reaching Bottom of the page
psquillace



 
Msg#: 4215853 posted 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

 

Major_Payne



 
Msg#: 4215853 posted 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]

sanji41



 
Msg#: 4215853 posted 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

psquillace



 
Msg#: 4215853 posted 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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved