March 23, 200917 yr I'm having problems with this. I have a few floating divs inside another div with size as auto, but the div seems to ignore it, and not bother. Then when i started doing the footer divs, it was appearing behind my content ones that are meant to be inside the div "main". What have i done wrong? <html> <head> <style> body { text-align:center; } #wrapper{ margin: 0 auto; width: 1024px; text-align:left; } #header{ padding : 10px; background: #CCFFCC; width: 1024px; height: 150px; } #menu{ background: #CCCCCC; width: 1024px; height: 40px; } #memberbar{ background: #CCCCCC; margin-top: 10px; width: 1024px; height: 100px; } #main{ margin-top : 10px; padding : 10px; background: #CCFFCC; width: 1024px; } #scroller{ position: relative; float: left; background: #CCCCCC; width: 804px; height : 200px; } #gallery{ position: relative; margin-left : 20px; float: left; background: #CCCCCC; width: 200px; height : 200px; } #content{ position: relative; margin-top : 20px; float: left; background: #CCCCCC; width: 754px; height : 500px; } #latest{ position: relative; margin-top : 20px; margin-left : 20px; float: left; background: #CCCCCC; width: 250px; height : 500px; } #footer{ } #footer-logo{ } #footer-content{ } </style> </head> <body> <div id="wrapper"> <div id="header"> <div id="menu"> </div> <div id="memberbar"> </div> </div> <div id="main"> <div id="scroller"> </div> <div id="gallery"> </div> <div id="content"> </div> <div id="latest"> </div> </div> <div id="footer"> <div id="footer-logo"> </div> <div id="footer-content"> </div> </div> </div> </body>
March 23, 200917 yr Hi this is a common problem. You need a good grounding in CSS floats. Check this out: CSS Float Guide
March 23, 200917 yr I love how handy it is for you to link to your CSS Float blog post from a few days ago Gareth Quite timely. But anyway, as already stated above. Remember to clear all floated elements to avoid problems in future .
March 23, 200917 yr It's something that gets asked here all the time. That's one of the reasons I wrote the guide, quick and easy to point to it now.
March 24, 200917 yr Feel free to take any and all of the CSS code from these examples and use them in your own endeavors. If you don't have enough time to learn CSS design and just want to have a template, take any of these examples. And to those designers out there, if you make an impressive layout, let me know about it and I might add it to these examples.
March 24, 200917 yr You can either set the height of your main div to the same as your biggest float or create another class in your style sheet: .clearall { clear:both; } and then after your floats but still within your main div: <p class="clearall"></p> and that will extend your main div to enclose all the floats. Floats are a pain in the ass until you get a grasp of whats actually going on.
March 24, 200917 yr I also notice that your layout is 1024px. You know that explorer will add the padding onto that as well so you will end up with a bigger header than the wrapper...
March 24, 200917 yr Author thanks for your help man, blog is awesome. This is just for layout, but if you have a work around on that 1024px thing, I'd be happy to take it on board. I'm always looking to learn more xD
March 25, 200917 yr Check this out: CSS Float Guide Look at block-level elements, that's what DIV's are.
March 27, 200917 yr Hello to all , Here is something about CSS's coding DIV.NAVHEADER { color: #000000; background-color: #EFEFF8; padding: 5px; margin-bottom: 10px; width: 100%; border: thin solid #a0a0d0; }
Create an account or sign in to comment