I have a vertical layout that I want to remain centered on the page. One column stays fixed on the page while the other should scroll according to the content and there are some decorative floating divs that are absolute. I want the scrolling column to display 100% vertically, even if the content doesn’t require the height, but I can’t seem to get this to work. I’ve set the html tag and body tag to height:100%, as well as all of the necessary div tags. Having the html tag set to this attribute causes all of the content except for .content and .share to disappear.
Here is my html:
<html>
<body>
<div class="leaderboard"></div>
<div class="container">
<div class="share">
<p>All content © 2011
<br />
Web Design © <a href="http://www.unillu.com" target="_blank">Unillu</a>, Megan Prior-Pfeifer</p></div>
<div class="sidebar1">
<img src="assets/llama.png" width="168" height="265" alt="Deathllama logo" />
<ul class="nav">
<li><a href="howto.html"><img src="assets/phone.png" width="208" height="15" alt="How to put ringtones on your phone!" /></a></li>
<li><a href="dinosaur.html"><img src="assets/kill.png" width="208" height="31" alt="Kill a dinosaur the easy way!" /></a></li>
<li><a href="ringtones.html"><img src="assets/ringtones.png" width="208" height="15" alt="Bad ringtones for you to use!" /></a></li>
<li><a href="legal.html"><img src="assets/legal.png" width="208" height="15" alt="Use the content accordingly!"/></a></li>
<li><a href="contact.html"><img src="assets/contact.png" width="208" height="15" alt="Talk to me!"/></a></li>
<li><a href="faq.html"><img src="assets/faq.png" width="208" height="15" alt="Look here before you ask me anything!" /></a></li>
<li><a href="index.html"><img src="assets/home.png" width="208" height="15" alt="Go home!"/></a></li>
</ul>
<p> </p>
<div class="extraDiv1"></div>
<!-- end #sidebar1 --></div>
<div class="content">
<div class="extraDiv2"></div>
<p>Contact</p>
<div class="ads_column"></div>
<h3 id="text">Contact Brian, Creator:</h3>
<p id="text"><a href="mailto:brianbritvec@gmail.com">brianbritvec@gmail.com</a></p>
<h5 id="text">Contact Megan, Webmaster:</h5>
<p id="text"><a href="mailto:mprior@unillu.com">mprior@unillu.com</a></p>
<!-- end .content --></div>
<!-- end .container --></div>
</body>
</html>
And here is my CSS:
html, body {
margin: 0;
padding: 0;
color: #FFF;
font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 1.4;
background-color: #61ADC3;
}
html {
min-height:100%;
}
body, .container, .content, .extraDiv2, .sidebar{
height:100%;
min-height:100%;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin: 10;
padding-right: 15px;
padding-left: 15px;
}
a img {
border: none;
}
a:link, a:visited, a:hover, a:active, a:focus{
color: #FFF;
text-decoration: underline;
}
.container {
width: 640px;
margin: 0 auto;
overflow: hidden;
background-color: #61ADC3;
}
.sidebar1 {
z-index: 2;
float: left;
width: 224px;
padding-bottom: 10px;
position: fixed;
background-attachment: fixed;
background-color: #61ADC3;
background-repeat: no-repeat;
background-position: right top;
text-align: right;
padding-right: 32px;
}
.extraDiv1{
z-index:3;
position:absolute;
top:0;
width:29px;
height:609px;
margin-left:227px;
background-image: url(assets/sidebar.png);
background-repeat: no-repeat;
background-position: left top;
}
.extraDiv2{
z-index:5;
position:fixed;
margin-top:-10px;
width:12px;
background-image: url(assets/stripe.jpg);
background-repeat: repeat-y;
background-position: left;
}
.content {
z-index:5;
width: 384px;
float: right;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
background-image: url(assets/gradient.png);
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
background-color: #FBB03B;
}
/* Hack for IE */
* html .content {
height: 100%;
}
/* End IE Hack */
.leaderboard {
width:795 px;
margin: 0px auto;
background-color: #61ADC3;
}
#descriptions {
font-size: 12px;
line-height: 1;
display: block;
width: 170px;
margin:15px 55px;
}
#descriptions h5 {
font-size:14px;
font-weight:bold;
}
#text {
font-size: 12px;
line-height: 1;
width: 200px;
margin: 15px 25px;
}
#text h5{
font-size: 14px;
font-weight: bold;
}
#play {
width: 25px;
margin-right:0px;
float:left;
}
.share {
z-index:5;
font-size:9px;
bottom: 0px;
text-align: right;
width: 256px;
position:fixed;
float: left;
color: #F00;
}
.share a {
color: #C30;
}
#ads_column {
float:right;
padding: 5 px 5 px 0 px 5px;
}
.content ul, .content ol {
padding: 0 15px 15px 40px;
}
ul.nav {
list-style: none; /* this removes the list marker
}
ul.nav li {
display: block;
margin: 5px;
}
ul.nav a, ul.nav a:visited {
margin: 5px;
display: block;
text-decoration: none;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
border:1px;
border-color: #F30;
}
Your CSS is a huge mess.
First, avoid using
position:fixed, especially on such large scale. Most mobile browsers don’t “fix” those positions, and some older browsers render incorrectly with them.height:100%means set the height to 100% of its parent container. However, which in this case is “container”, which again is sized as 100% of its container, which is “body”. As “body” does not have a height set on it, body’s height gets calculated to be enough height to wrap the entire page.Note: Setting
height:100%on body doesn’t work to make it scale to the entire window; you have to setposition:absoluteon body and make top/left/right/bottom zero to do that.Back to the “body” height calculation. Notice that the sizing calculation does not include anything that is “floated”, because when you “float” something, it takes it outside of the normal layout. Anything that is “floated” occupy no spacing!
Try this experiment: turn off
overflow: hiddenin your “container”, and you’ll see the height of “container” and “body” suddenly collapses into zero. All your elements are floated, so they take up no space if there is notoverflow: hidden.Thus, you whole mess of CSS is essentially telling “content” to size itself to 100% of the height of “container”, which is 100% of “body”, which is whatever height that is necessary to include all the content of the page. With
overflow: hiddenin “container”, that height is the height of “content”. Withoutoverflow: hiddenin “container”, that height is zero.If the height of “content” is 100% of zero, which is zero, and it does not itself have “overflow: hidden” set on it, and it is a block element, then this height will simply be ignored and the height becomes whatever height that is required to hold its elements.
There you go. Now you know why your orange doesn’t extend all the way to the bottom of the screen. You were depending on
height:100%on “body” to stretch it out to the full height of the screen; it doesn’t work this way.The solution?
DELETE THE WHOLE THING AND TOTALLY REWRITE YOUR CSS — It is too much of a mess. You don’t want this. And it will never work right for you. Get a good book on CSS and read through it, then do it RIGHT. CSS is not something you can learn via trial-and-error.
Start with
position:absolute; left:0px; right:0px; top:0px; bottom:0px;on “body”. This will stretch “body” to fill the whole window. Check it by setting a background color on “body”.Notice that #2 may not work on mobile browsers. You’ll need to set a min-height in pixel value to make sure that it fills the whole screen.