Jump to content

Height... I am confused

Krewe

By Krewe
in CSS

 Share

Recommended Posts

Krewe Member

Krewe

Posted
Posted

Hey Guys, I am trying to make my template for my site but I am running into a problem.This is my code (CSS):

html,body{height:100%;margin:0px;padding:0px;}body{background-color:#111111;}#container{width:100%;min-height:100%;min-width:900px;margin-bottom: -250px;position: relative;}#content{width:900px;height:100%;margin-left:auto;margin-right:auto;background-color:#eaecea;background-image:url('../images/curl.png');background-repeat:no-repeat;background-position:top left;}/***************Nav**************/#nav{height:50px;width:100%;background-color:#111111;}#menu{margin-left:auto;margin-right:auto;width:900px;height:50px;font-family: 'Permanent Marker', cursive;font-size:22px;color:#eaecea;}#logo{padding-top:7px;float:left;}#logo a:link,#logo a:visited{color:#eaecea;text-decoration:none;}#logo a:hover,#logo a:active{color:#fea40f;text-decoration:none;}#links{float:right;padding-top:7px;}ul#navLinks{margin:0px;padding:0px;list-style-type: none;}ul#navLinks li{display:inline;list-style-type: none;padding-right:7px;}#links a:link,#links a:visited{color:#eaecea;text-decoration:none;}#links a:hover,#links a:active{color:#fea40f;border-bottom:5px solid #fea40f;}/*************Content*************/#welcome{width:100%;height:220px;}/*************Footer*************/.clearfooter {height: 250px;clear: both;}#footer {height: 250px;width:900px;margin-left:auto;margin-right:auto;background-color:#eaecea;position: relative;}

Html Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Home | Code Krewe</title><link rel="stylesheet" href="css/style.css" type="text/css" /></head><body><div id="container">  <div id="nav">   <div id="menu">    <div id="logo">	 <a href="index.php"><Code Krewe⁄></a>    </div>    <div id="links">	 <ul id="navLinks">	  <li><a href="index.php">Home</a></li>	  <li><a href="index.php">About</a></li>	  <li><a href="index.php">Portfolio</a></li>	  <li><a href="index.php">Services</a></li>	  <li><a href="index.php">Blog</a></li>	  <li><a href="index.php">Contact</a></li>	 </ul>    </div>   </div>  </div>  <div id="content">   <div id="welcome">      </div>  </div><div class="clearfooter"></div></div><div id="footer"></div></body></html>

The Content height is not going the full distance between the nav and the footer. It is only going as far as the content will fill (210px at the moment). How can I get it to span the full height/distance between the end of the nav and the beginning of the footer? Http://www.codekrewe.com/testingYou can see what is happening there.

Link to comment
Share on other sites
Krewe Member

Krewe

Posted
  • Author
Posted

Everything I am reading online says the problem for most people is that the html is not set to Height:100%;but mine is... and every other height:100%; is working, but the content.

Link to comment
Share on other sites
boen_robot w3schools Guru

boen_robot

Posted
Posted

Your footer is outside your container, while your content is in it... at your container, you've set min-height:100%;. That probably ends up messing the footer up... try to set the min-height equal to the margin, i.e. 250px.

Link to comment
Share on other sites
Krewe Member

Krewe

Posted
  • Author
Posted (edited)

I know it is. It is so the footer will always be on the bottom of the page. http://fortysevenmed...y_put_with_css/ I was was following that tutorial. Edit: Let me try that :) / Did not work.What I would like is, if the content of the page does not span the full height of the page the footer will rest on the bottom and the content bg will flow all the way to the start of the footer. If you look what I have right now it is close to what I want, the content is the full 100%. BUT it is going past the footer now... just by like 50px.

Edited by Krewe
Link to comment
Share on other sites
Krewe Member

Krewe

Posted
  • Author
Posted

Css: 

/*Colors:Background - #eaeceaLinks - #fea40fDark Grey - #222222*/@import url(http://fonts.googleapis.com/css?family=Permanent+Marker);html,body{height:100%;margin:0px;padding:0px;}body{background-color:#111111;}h1,h2,h3,h4,h5,h6{margin:0px;padding:0px;color:#fea40f;}#container{width:100%;height:100%;min-width:900px;position: relative;margin-bottom:-250px;}#content{width:900px;height:100%;margin-left:auto;margin-right:auto;background-color:#eaecea;background-image:url('../images/curl.png');background-repeat:no-repeat;background-position:top left;margin-bottom:-250px;}/***************Nav**************/#nav{height:50px;width:100%;background-color:#111111;}#menu{margin-left:auto;margin-right:auto;width:900px;height:50px;font-family: 'Permanent Marker', cursive;font-size:22px;color:#eaecea;}#logo{padding-top:7px;float:left;}#logo a:link,#logo a:visited{color:#eaecea;text-decoration:none;}#logo a:hover,#logo a:active{color:#fea40f;text-decoration:none;}#links{float:right;padding-top:7px;}ul#navLinks{margin:0px;padding:0px;list-style-type: none;}ul#navLinks li{display:inline;list-style-type: none;padding-right:7px;}#links a:link,#links a:visited{color:#eaecea;text-decoration:none;}#links a:hover,#links a:active{color:#fea40f;border-bottom:5px solid #fea40f;}/*************Content*************/#topMsg{width:100%;height:210px;padding-left:210px;}/*************Footer*************/.clearfooter {height: 250px;clear: both;}#footer {height: 250px;width:900px;margin-left:auto;margin-right:auto;background-color:#111111;position: relative;-webkit-box-shadow: 0 -8px 8px -7px black;-moz-box-shadow: 0 -8px 8px -7px black;box-shadow: 0 -8px 8px -7px black;}.footerPillar{float:left;width:30%;padding:5px;}

Html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Home | Code Krewe</title><link rel="stylesheet" href="css/style.css" type="text/css" /></head><body><div id="container">  <div id="nav">   <div id="menu">    <div id="logo">	 <a href="index.php"><Code Krewe⁄></a>    </div>    <div id="links">	 <ul id="navLinks">	  <li><a href="index.php">Home</a></li>	  <li><a href="index.php">About</a></li>	  <li><a href="index.php">Portfolio</a></li>	  <li><a href="index.php">Services</a></li>	  <li><a href="index.php">Blog</a></li>	  <li><a href="index.php">Contact</a></li>	 </ul>    </div>   </div>  </div>  <div id="content">   <div id="topMsg">   </div>  </div></div><div id="footer">  <div class="footerPillar">  hfjvbnvjsajvnjsdvnjsdavnbjsd  </div>  <div class="footerPillar">   vsdvsadvsavasdvsdavasv  </div>  <div class="footerPillar">   vsadvsdavsadvsavadsvsdavsdvdsa  </div></div></body></html>

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted (edited)

Only the outer container will stretch to 100% body height, for a sticky footer outside the outer container you would apply margin-top: plus the height of the footer, and in the content you would add padding at bottom also at the same height of footer.For the background to reach the bottom i would add another container, centred, width 900px and required background color. 

	<div id="container"><div style="background-color: #EAECEA; width: 900px; margin: 0pt auto;">		<div id="nav">			<div id="menu">				<div id="logo"> 					<a href="index.php"><Code Krewe⁄></a>				</div>				<div id="links">					<ul id="navLinks">						<li><a href="index.php">Home</a></li>						<li><a href="index.php">About</a></li>						<li><a href="index.php">Portfolio</a></li> 						<li><a href="index.php">Services</a></li>						<li><a href="index.php">Blog</a></li>						<li><a href="index.php">Contact</a></li>					</ul>				</div>			</div>		</div> 		<div id="content">			<div id="topMsg"> 			</div>		</div>	<div class="clearfooter"></div></div>	</div>		<div id="footer">	</div>

#content {  	background-color: #EAECEA;	background-image: url("../images/curl.png");	background-position: left top;	background-repeat: no-repeat;	margin-left: auto;	margin-right: auto;   /* padding-bottom: 250px;*/	width: 900px;}   #footer {  	background-color: #111111;	box-shadow: 0 -8px 8px -7px black;	height: 250px;	margin-left: auto;	margin-right: auto;	margin-top: -250px;	position: relative;	width: 900px;}

Edit: looks like you can lose the padding, seems the height of corner image is force down by that approx amount anyway.

Edited by dsonesuk
Link to comment
Share on other sites
Krewe Member

Krewe

Posted
  • Author
Posted

Thanks Dsone :)I've got one question though. Why does it give me a 50px addition area on the bottom of the page?Everything looks right but the vertical scroll bar is still there and there is approx 50px of space there.

Link to comment
Share on other sites
Krewe Member

Krewe

Posted
  • Author
Posted (edited)

If I change the .clearfooter height to 195px instead of 250px it fits. But any idea why that space is there in the first place?Edit: IF you know the answer to that question I would still love to know... it is very odd. However, your changes work perfect and I can't thank you enough! You sure know your stuff.

Edited by Krewe
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

Rewind, rethink! Create background to match background you require (lt grey) you have to use the container element as that will always be to total height of the page, change this to same width 900px, the padding-bottom: for #content was right! so still used this. The reason the other method did not work was because its height was determined by content + padding, that why depending on browser window height it would look fine in one but not in other. Using background for #container fixes this, but you have to use background colour for menu to hide this background image. so her is the new layout and css 

<div id="container">			    <div id="nav">					    <div id="menu">							    <div id="logo">									    <a href="index.php"><Code Krewe⁄></a>							    </div>							    <div id="links">									    <ul id="navLinks">											    <li><a href="index.php">Home</a></li>											    <li><a href="index.php">About</a></li>											    <li><a href="index.php">Portfolio</a></li>											    <li><a href="index.php">Services</a></li>											    <li><a href="index.php">Blog</a></li>											    <li><a href="index.php">Contact</a></li>									    </ul>							    </div>					    </div>			    </div>			    <div id="content">					    <div id="topMsg"><div> </div>					    </div>					    <p>Quis nostrud exercitation in reprehenderit in voluptate						  excepteur sint occaecat. Lorem ipsum dolor sit amet,						  duis aute irure dolor ut aliquip ex ea commodo consequat.						  Quis nostrud exercitation velit esse cillum dolore						  ut labore et dolore magna aliqua. Ut enim ad minim						  veniam, ullamco laboris nisi consectetur adipisicing						  elit.</p>					    <p>Eu fugiat nulla pariatur. Quis nostrud exercitation						  in reprehenderit in voluptate ut enim ad minim veniam.						  Lorem ipsum dolor sit amet. Quis nostrud exercitation						  ut enim ad minim veniam, ullamco laboris nisi. Excepteur						  sint occaecat in reprehenderit in voluptate duis aute						  irure dolor.</p>					    <p>Quis nostrud exercitation in reprehenderit in voluptate						  excepteur sint occaecat. Lorem ipsum dolor sit amet,						  duis aute irure dolor ut aliquip ex ea commodo consequat.						  Quis nostrud exercitation velit esse cillum dolore						  ut labore et dolore magna aliqua. Ut enim ad minim						  veniam, ullamco laboris nisi consectetur adipisicing						  elit.</p>					   			    </div>	    <div class="clearfooter"></div></div><div id="footer">  <div class="footerPillar">  hfjvbnvjsajvnjsdvnjsdavnbjsd  </div>  <div class="footerPillar">   vsdvsadvsavasdvsdavasv  </div>  <div class="footerPillar">   vsadvsdavsadvsavadsvsdavsdvdsa  </div></div>

@import "http://fonts.googleapis.com/css?family=Permanent+Marker";html, body {    height: 100%;    margin: 0;    padding: 0;}html {overflow-y:scroll;}body {    background-color: #111111;}h1, h2, h3, h4, h5, h6 {    color: #FEA40F;    margin: 0;    padding: 0;}#container {    background: url("lt_grey_bg.jpg") repeat-y scroll 0 0 transparent;    margin: 0 auto;    min-height: 100%;    position: relative;    width: 900px;    }#content {   /* background-color: #EAECEA;*/padding-bottom: 250px;    margin-right: 10px;    margin-left: 10px;    /*width: 900px;*/}#nav {    height: 50px;    /*width: 100%;*/        background-color:#111}#menu {    color: #EAECEA;    font-family: 'Permanent Marker',cursive;    font-size: 22px;    height: 50px;    margin-left: auto;    margin-right: auto;    width: 900px;    }#logo {    float: left;    padding-top: 7px;}#logo a:link, #logo a:visited {    color: #EAECEA;    text-decoration: none;}#logo a:hover, #logo a:active {    color: #FEA40F;    text-decoration: none;}#links {    float: right;    padding-top: 7px;}ul#navLinks {    list-style-type: none;    margin: 0;    padding: 0;}ul#navLinks li {    display: inline;    list-style-type: none;    padding-right: 7px;}#links a:link, #links a:visited {    color: #EAECEA;    text-decoration: none;}#links a:hover, #links a:active {    border-bottom: 5px solid #FEA40F;    color: #FEA40F;}#topMsg {    height: 210px;    /*padding-left: 210px;    width: 100%;*/    background-image: url("../images/curl.png");    background-position: left top;    background-repeat: no-repeat;    margin-left: -10px;}#topMsg div { margin-left:220px; min-height:210px;}.clearfooter {    clear: both;    /*height: 195px;*/}#footer {    height: 250px;    margin-left: auto;    margin-right: auto;    margin-top: -250px;    position: relative;    width: 900px;    background-color:#eaecea;    color:#000;    }.footerPillar {    float: left;    padding: 5px;    width: 30%;}

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...