#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    7
    Rep Power
    0

    Inner divs don't appear in the outter div


    Hi.
    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.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    
    body
    {
       background-color:#E5E5E5;
       font-family:Tahoma, Geneva, sans-serif;
       font-size:12px;
    }
    
    #wrapper
    {
    	background-color:#FFF;
    	margin-bottom:10px;
    	border:thin groove;
    	width:1200px;
    	margin:auto;
    }
    
    #left
    {
       width: 300px;
       float:left;
    }
    
    #middle 
    {
       width: 600px;
       float:left;
    
    }
    
    #right
    {
       width:300px;
       float:left;
    
    }
    </style>
    </head>
    
    <body>
      
       <div id = "wrapper">   
                
          <div id = "left">
             <p>Left</p>
           </div>
                
           <div id = "middle">
              <p>Middle</p>
           </div>
                
           <div id = "right">
              <p>Right</p>
           </div>    
     
        </div>
       
    </body>
    </html>
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    876
    Rep Power
    276
    add overflow:hidden; to your #wrapper css to get the #wrapper DIV to enclose the "floated" DIVs inside.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    7
    Rep Power
    0
    Originally Posted by DonR
    add overflow:hidden; to your #wrapper css to get the #wrapper DIV to enclose the "floated" DIVs inside.
    Thanks a lot. it solved my problem.
    Can you tell me why this happens and why we have to use overflow?
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    876
    Rep Power
    276
    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.

    EDIT:
    A simple "google" found THIS which seems to explain things some.
    Last edited by DonR; August 13th, 2013 at 05:17 PM.
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    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.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    7
    Rep Power
    0
    Originally Posted by Kravvitz
    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.
    Thanks.
    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?
  12. #7
  13. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    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.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo