• 0

CSS 100% height problem


Question

CSS

html, body {
	margin: 0;
	background: #CCCCCC;
	height: 100%;
}
.source #shadow {
	margin: 0 auto;
	width: 840px;
	min-height: 100%;
	height: 100%;
} 
.source #container {
	background-image: url(images/shadow.png);
	background-repeat: repeat-y;
	padding-left: 20px;
	margin: 0 auto;
	width: 840px;
	min-height: 100%;
	height: 100%;
}
.source #header { 
	padding: 0;
	margin: 0;
	height: 240px;
	width: 800px;
} 
.source #links {
	background-image: url(images/Untitled-1_02.png);
	padding: 0px;
	margin: 0px;
	color: #dbe5ec;
	height: 21px;
	width: 800px;
}
.source #links ul,li {
	margin: 5px 5px 5px 10px;
	padding-top:
	list-style: none;
	display: inline;
}

.source #mainContent {
	background-image: url(images/Untitled-1_06.png);
	margin: 0;
	width: 800px;
	height: 100%;
}
.source #mainContent #mainText {
	position: relative;
	padding-left: 30px;
	padding-bottom: 60px;
	width: 800px;
	color: #000000;
	height: 100%;
	clear: both;
} 
.source #footer {
	position: absolute;
	background-image:url(images/Untitled-1_05.png);
	height: 60px;
	bottom: 0;
	width: 800px;
}

HTML

<body class="source">
<div id="shadow">

  <div id="container">

    <div id="header">
    	<img src="images/Untitled-1_01.png" width="800" height="240" alt="" />
    </div>
    <div id="links">
        <ul>
        	<li><a href="home">Home</a></li>
        	<li><a href="home">Home</a></li>
        	<li><a href="home">Home</a></li>
        	<li><a href="home">Home</a></li>
        </ul>
        </div>
    <div id="mainContent">
    <img src="images/Untitled-1_04.png" width="800" height="19" alt="" />
    	<div id="mainText">
      		asd
      		<!-- end #mainContent -->
      	</div>
    </div>
   <div id="footer">
    	 
   </div>

   </div>

</div>

I've got a shadow wrap, and regular wrap, I'm trying to get the footer to stick to the bottom. Problem is I'm getting a huge gap between the mainText/mainContent div and the footer.

mainText is for the text padding, but I might just change that to a <P> and add the padding like that which might solve the problem I'm having but I've tried removing mainText with no luck.

Suggestions, advice, comments appreciated.

Link to comment
Share on other sites

10 answers to this question

Recommended Posts

  • 0

Still tweaking, this is the updated zip. You guys are giving me good tips, but they already exist. For whatever reason mainContent will not stretch out unless I add height: 100%; to it. When I do it over stretches.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.