| Cannot Get Column to a 100% height
Column Height Not Reaching Bottom of the page |
psquillace
msg:4215855 | 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:4215959 | 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:4216036 | 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:4216156 | 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
|
|
|
