footer not showing properly

justin7410 · January 3, 2014

Hey guys,

i am just messing around with the float property and setting up a layout with 3 columns.

i am trying to tie in this column layout between a header and footer.

code:

<!doctype html>
<html>
<head>
<title>Responsive Image</title>
<meta charset="utf-8">
<link href="css/demo.css" rel="stylesheet" type="text/css"></link>

<script>
document.cookie = "device_dimensions=" + screen.width + "x" + screen.height;
</script>

</head>
<body>

<div class="header"></div>


<div class="left"></div>


<div class="center"></div>


<div class="right"></div> 


<div class="footer"></div>
</body>
 </html>

and the CSS

body{
  margin: 0px 0px;
  padding: 0px 0px;

}
.header{

   height: 50px;
    width: auto;
     background-color: gray;
}

.left{

   height: 500px;
   width: 180px;
   margin-left: 100px;
   border: black 3px solid;
   margin-top: 20px;
   float:left;

}
.center{

   height: 500px;
   width: 700px;
    border: black solid 3px;
    float: left;
    margin-top: 20px;
    margin-left: 20px;
}
.right{

     height: 500px;
      width: 200px;
      border: black solid 3px;
      float: left;
     margin-top: 20px;
     margin-left: 20px;
    margin-bottom: 20px;
}
.footer{

     height: 50px;
     width: auto;
     background-color: black;

}

IMAGE OF FINAL PRODUCT

I want the footer to box the content ( 3 columns ) with the header.

any suggestions as to why the footer is foregoing the content and sticking to the header ?

possien · January 3, 2014

Try this in your css:

.clear{clear:both}

Add it after your last div before the footer:

<div class="right"></div> 

<div class="clear"></div>

<div class="footer"></div>

This will push the footer div down below your columns.

Edited January 3, 2014 by possien

Strider64 · January 4, 2014

You could use a fluid grid system (just google css fluid grid design to learn more about it) and do something like this:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3 Column Layout</title>
	<style>
		body {
			color: #fff;
			padding: 0;
			margin: 0;
		}
		@viewport {
			zoom: 1.0;
			width: extend-to-zoom;
		}
		@-ms-viewport {
			width: extend-to-zoom;
			zoom: 1.0;
		}
		.container {
			/* * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */
			*zoom: 1;
			width: 100%;
			max-width: 1100px;
			margin: 0 auto;
			box-sizing: border-box;
		}
		.container:after {
			clear: both;
		}
		.container:before,
		.container:after {
			content: " ";
			display: table;
		}	
		[class^="m-span"] {
			padding: 10px 0;
			margin-left: 3.125%;
			float: left;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			/* Firefox */

		}
		[class^="m-span"]:first-child {
			margin-left: 0;
		}
		.m-span4 { width: 31.25%; }
		.header, .footer{
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			height: 50px;
			background-color: orange;
			margin-bottom: 10px
		}
		.left, .center, .right {
			background-color: steelblue;
			border: black 3px solid;
			height: 500px;
			padding: 30px;
		}
		/* You can stylize the individual columns seperately */
		/* Just as long as the below the main styling        */
		.left { background-color: grey; } 
		.footer{ 
			background-color: black;	
			margin-top: 10px;
		}		
	</style>
</head>
<body>
	<header class="header">HEADER</header>

	<section class="container">
		<div class="m-span4 left">LEFT COLUMN</div>


		<div class="m-span4 center">CENTER COLUMN</div>


		<div class="m-span4 right">RIGHT COLUMN</div> 
	</section>

		<footer class="footer">FOOTER</footer>	
	</body>
	</html>

Edited January 4, 2014 by Strider64

Sign In

footer not showing properly

Recommended Posts

justin7410

Link to comment

Share on other sites

possien

Link to comment

Share on other sites

Strider64

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information