August 13th, 2013, 02:50 PM
Inner divs don't appear in the outter div
I have a problem with CSS divs positioning. I want to create a div that contains three divs as three columns. I wrote the code below but the left, middle and right divs are placed outside the wrapper.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
font-family:Tahoma, Geneva, sans-serif;
<div id = "wrapper">
<div id = "left">
<div id = "middle">
<div id = "right">
August 13th, 2013, 03:23 PM
add overflow:hidden; to your #wrapper css to get the #wrapper DIV to enclose the "floated" DIVs inside.
August 13th, 2013, 04:59 PM
Thanks a lot. it solved my problem.
Originally Posted by DonR
Can you tell me why this happens and why we have to use overflow?
August 13th, 2013, 05:11 PM
I, honestly, don't know the "WHY"....
I do know that "floated" items are taken out of the main layout/flow, but, as to why the overflow property causes those floats to be contained once again, I never bothered to figure out. [I did learn that you could also just "float:left;" the #wrapper DIV (parent div), but, then you lose the ability to center it using the "margin:0 auto;" method.]
Maybe Kravvitz can chime in and enlighten us.
A simple "google" found THIS which seems to explain things some.
Last edited by DonR; August 13th, 2013 at 05:17 PM.
August 14th, 2013, 12:45 PM
Welcome to DevShed Forums, e.shekari.
Why it happens is because that's the way floats were designed. They were originally just intended to allow you to put an image next to a paragraph, but they work fairly well for creating columns too, so they're used that way as well.
The article DonR linked to explains it fairly well. However, I usually avoid using the overflow property for that purpose because I prefer to let things, including box-shadow, overflow freely.
You can find more information here.
August 15th, 2013, 03:22 PM
Originally Posted by Kravvitz
I'm sorry, I have not looked at the pages you & DonR linked to. Because I'm busy with writing a website these days.
So if you don't use overflow for that purpose how do you do that? Is there a standard or recommended way to do this thing?
August 15th, 2013, 03:31 PM
I use different techniques depending on the circumstances. I'm not a fan of one-size-fits-all type of approaches to technical problems like this.
When possible, I prefer to give the parent element "float:left" and "width:100%" (which won't work for the code you posted here). I almost always give "clear:both" to the page footer.