Reply With QuoteTake the heights off and let content dictate height.
|
|
|
|
|
|
|
New Member: Posts Will Be Moderated
Help with CSS height
I'm using a basic 3 column layout with a header and footer. My problem is, though all my heights are set to min-height 100% and/or height 100%, my page always generates extra scrolling. Though my content hardly takes up the half page, there's still roughly 100px I still have to scroll through. The website is michael-carper.com.
Here's all my code:
<style type="text/css">
html, body {
margin:0;
padding:0;
height:100%;
min-width:800px;
}
#container {
min-height:100%;
height:auto;
height:100%;
position:relative;
width:1000px;
margin: 0 auto;
}
#header {
position:relative;
height:100px;
width:100%;
display:block;
overflow:auto;
padding-bottom:20px;
}
#leftcol {
width:15%;
float:left;
position:relative;
padding-left:20px;
line-height:100%;
}
#twocols {
width:82%;
float:right;
position:relative;
height:100%
}
#rightcol {
width:19%;
float:left;
position:relative;
padding-left:20px;
line-height:100%;
}
#maincol {
background-color: #FFFFFF;
float: left;
position: relative;
width:73%;
border-left-style: solid;
border-left-color: gray;
border-left-width: 1px;
border-right-style: solid;
border-right-color: gray;
border-right-width: 1px;
padding-left:20px;
padding-right:10px;
padding-bottom:25px;
margin-top:0px;
height:100%;
}
.inline {
display:inline;
}
#footer {
height:25px;
background-color:gray;
clear:both;
display:block;
overflow:auto;
padding-left:5px;
padding-top:5px;
position:relative;
bottom:0;
width:1000px;
margin: 0 auto;
z-index:10;
}
A:link {
text-decoration: none;
color:black;
}
A:visited {
text-decoration: none;
color:black;
}
A:active {
text-decoration: none;
color:black;
}
A:hover {
text-decoration: underline;
}
</style>
<head>
<title>Michael Carper</title>
<meta name="description" content="Welcome to Michael Carper's site. I'm a student at Wabash interested in the internet and social media, law, and religion." >
<meta name-"keywords" content="Michael Carper, Michael student, Michael Carper Wabash" >
</head>
<body>
<div id="container">
<div id="header"><img src="website banner.png" height="100" /></div>
<div id="twocols">
<div id="maincol">
<h2 class="inline">Welcome To Michael Carper's Website</h2>
<br />
<br />
<p class="inline"><a name="about michael carper" style="text-decoration:none">Hi, I'm Michael Carper, a student at Wabash College. I built this website to gain experience in all the processes associated with web design and management. It also serves as a hub for all my activity on the internet. It's currently a little bare, save the links to the left, so check them out. More is to come.</a></p>
</div>
<div id="rightcol">
<P class="inline">Link1<br />
Link2<br />
Link3</P>
</div>
</div>
<div id="leftcol">
<p class="inline"><a name="michael carper" href="index.html">Welcome</a><br />
<a name="contact michael carper" href="find me.html">Find me</a><br />
<a name="michael carper blog" href="blog.html">I blog</a><br />
<a name="michael carper wabash" href="wabash.html">I go to Wabash</a></p>
</div>
<div id="footer">Copyright Michael Carper, 2011</div>
</div>
</body>
</html>
Any help would be appreciated. Thanks.
Established Member
Take the heights off and let content dictate height.
"Reliable and affordable web design - Bristol, UK"
Website Links: Bristol Web Design | Bristol IT Support | Corrosive Online
Social Media for Yoto Creative: Follow Us | Like Us
Posting Permissions
