justin7410 Posted January 3, 2014 Share Posted 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 ? Quote Link to comment https://forums.phpfreaks.com/topic/285049-footer-not-showing-properly/ Share on other sites More sharing options...
possien Posted January 3, 2014 Share Posted January 3, 2014 (edited) 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 Quote Link to comment https://forums.phpfreaks.com/topic/285049-footer-not-showing-properly/#findComment-1463673 Share on other sites More sharing options...
Strider64 Posted January 4, 2014 Share Posted January 4, 2014 (edited) 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 Quote Link to comment https://forums.phpfreaks.com/topic/285049-footer-not-showing-properly/#findComment-1463846 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.