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 ? 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 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. 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 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> Link to comment https://forums.phpfreaks.com/topic/285049-footer-not-showing-properly/#findComment-1463846 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.