http://www.news-string.com/index3.html The div id "postarea" is, for some reason, overlapping the footer div. I just can't figure out why. I thought that divs (which are block level elements) will never overlap unless a negative margin or padding is set. Shouldn't block level elements always move to the next line on the page if their is no float set? I tried float:none; on the footer block by the way ... for some reason that postarea div is always overlapping into it. I would really like to know why ... thanks
I am not good coder. but i think this will help you. Try this Full code of your html page : <html> <head> <style type="text/css"> div#container { background-color: #EFF4F3; border-color:#000000; border-style:solid; border-width:0 7px; margin:0 auto; min-height: 1000px; width:950px; } div#header { background-color:#EFF4F3; } div#header img { padding:0px 0 0 30px; } div#header h1 { margin:30px 0 30px 30px; line-height:.5em; } div#header ul { padding:10px 10px 10px 30px; text-transform:uppercase; font-family:arial,verdana,helvetica,sans-serif; font-size:11px; color:#FFFFFF; background-color:#000000; border-bottom: 7px solid; border-color:#496964; } div#header li { display:inline; margin:0 26px 0 0; } div#box { height:200px; width:920px; background-color:#EFF4F3; margin-left:30px; } div.boxs1 { height:200px; width:295px; background-color:#FFFFFF; float:left; margin:5px; } body { background-color:#FFFFFF; } h1 { padding:0 30px 0 30px; color:#545274; } p { font-family:"Times New Roman"; font-size:20px; } div#main { background-color:#EFF4F3; height:1000px; } div#postarea { width:604px; margin-left:30px; margin-top:20px; float:left; background-color:#FFFFFF; } div#sidebar { width:295px; min-height:500px; float:left; margin-left:10px; margin-top:20px; background-color:#FFFFFF; } div#footer { background-color:#000000; height:400px; margin:0 auto; width:950px; border-color:#000000; border-style:solid; border-width:0 7px; } /* Styling for elements */ h1,h2,h3,h4,h5,h6 { font-family: Verdana, Verdana, Geneva, sans-serif; color:545274; margin:30px; } p { font-family: Verdana, Verdana, Geneva, sans-serif; color:545274; margin-left:30px; margin-right:30px; } /* End styling for elements */ </style> </head> <body> <div id="container"> <div id="header"> <ul> <li>Home</li> <li>News</li> <li>Stuff</li> <li>Info</li> <li>Test</li> </ul ><h1>Test.net</h1> <div id="box"> <div class="boxs1"> </div> <div class="boxs1"> </div> <div class="boxs1"> </div> </div> </div> <div id="main"> <div id="postarea"> <h2>This is a test heading.</h2> <p>This is a test of a paragraph. This is a test of a paragraph. This is a test of a paragraph. This is a test of a paragraph. This is a test of a paragraph. This is a test of a paragraph. This is a test of a paragraph. This is a test of a paragraph. This is a test of a paragraph.</p> <p>This is a test of a paragraph. This is a test of a paragraph. This is a test of a paragraph. This is a test of a paragraph. This is a test of a paragraph. This is a test of a paragraph. This is a test of a paragraph. This is a test of a paragraph. This is a test of a paragraph.</p> <p>This is a test of a paragraph. This is a test of a paragraph. This is a test of a paragraph. This is a test of a paragraph. This is a test of a paragraph. This is a test of a paragraph. This is a test of a paragraph. This is a test of a paragraph. This is a test of a paragraph.</p> <p>This is a test of a paragraph. This is a test of a paragraph. This is a test of a paragraph. This is a test of a paragraph. This is a test of a paragraph. This is a test of a paragraph. This is a test of a paragraph. This is a test of a paragraph. This is a test of a paragraph.</p> </div> <div id="sidebar"> </div> </div> </div> <div id="footer"> </div> </div> </body> </html>
That works but then my footer is messed up (pushed further to the right where it shouldn't be). Can anyone tell me what is going on here?
Parent containers are never to expand to contain floated elements. Floated elements are removed from the normal flow. This is why that div overflows its container and lays on top of the footer.
Hey, I used the two column layout provided there. Unfortunately, I am running into another problem. I have a container that wraps around everything in the header, body and footer. It has a 7px black border around it but, for some reason, the border is not displaying around everything. The border only display around the top 25% of the page. I figure there is some overlapping CSS element that is causing it to be hidden but I can't find it nor would I know what to do it I did. Here is the link: www.news-string.com/index5.html