Jump to content

footer not showing properly


justin7410

Recommended Posts

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

 

post-144747-0-78491300-1388722996_thumb.png

 

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 ?

Link to comment
https://forums.phpfreaks.com/topic/285049-footer-not-showing-properly/
Share on other sites

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>

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.