SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How come my parent container DIV height is 0px?

    Hey guys... I have a series of DIVs with DIVs inside.
    HTML Code:
    <div class="fixedWidth">
                    <div class="oneQuarterCol">
                        <img class="client_img fl_l" src='App_Themes/Default/img/logos/image0.png'
                            alt="" /></img></div>
                    <div class="threeQuarterCol">
                        <h3>
                            Title</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquam, risus quis viverra sodales, felis mauris placerat dui, id fermentum libero tellus ac mi. Nulla et enim lorem viverra fusce.  200</p>
                    </div>
                </div>       
              <div class="fixedWidth">
                    <div class="oneQuarterCol">
                        <img class="client_img fl_l" src='App_Themes/Default/img/logos/image1.png' alt="" /></img></div>
                    <div class="threeQuarterCol">
                        <h3>
                            Title</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ante tellus, porttitor non sollicitudin euismod, ultricies gravida eros. Mauris amet.  150</p>
                    </div>
                </div>       
              <div class="fixedWidth">
                    <div class="oneQuarterCol">
                        <img class="client_img fl_l" src='App_Themes/Default/img/logos/image2.png'
                            alt="" /></img></div>
                    <div class="threeQuarterCol">
                        <h3>
                            Title</h3>
                        <p>
                           Lorem ipsum dolor sit amet, consectetur adipiscing elit. In aliquet ligula sed turpis feugiat metus.  100</p>
                    </div>
                </div>
    My page is rendering improperly. If the text within the Paragraph tags is longer than 200 characters then everything formats properly. If the Paragraph tag text is smaller than 200 characters then things get improperly wrapped. I looked in Chrome's Developer Tools and it appears that the problem is related to the height of 'fixedWidth' being 0px.

    Code:
    .fixedWidth { width: 960px; margin: 0 auto; display: block; height: auto; }
    .fullWidth { width: 100%; display: block;}
    
    .oneQuarterCol, .threeQuarterCol, .fullCol, .oneThirdCol, .twoThirdCol
        { float: left; margin: 0 10px 40px 10px; }
    .oneQuarterCol      { width: 220px; }
    .threeQuarterCol    { width: 700px; }
    What am I missing in my CSS? I figured adding 'Height: auto' would force the height to be whatever the children elements totaled to.

    Thanks in advance for any insight you can provide.

  2. #2
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    5,350
    Mentioned
    214 Post(s)
    Tagged
    5 Thread(s)
    The parent div is not containing its children because they're floated. The easiest fix is probably to add overflow:hidden to .fixedWidth. (Floating the parent will also contain the children, but may mess up the rest of your layout, too. )

    A floated box is taken out of the flow, so it doesn’t affect the block-level boxes around it. Line boxes located next to a floated box, however, are shortened to make room for the float. A containing block will not expand to accommodate a floating child box, unless the containing block is also floating, or has its overflow property set to something other than visible.
    See the SitePoint CSS Reference for more information.


    BTW, you also have 3 closing </img> tags which shouldn't be there.
    Last edited by TechnoBear; Apr 4, 2012 at 08:10. Reason: Added SitePoint Reference quote.
    Don't be arrogant. Be kind to a koala that thinks it's a bear.

  3. #3
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So the problem was Float? I never knew the height property of floated elements was ignored. Is that a correct way to understand the problem?

    Anyways, your solution worked! I added overflow: hidden to .fixedWidth and it fixed everything... but, how come? My understanding of overflow: hidden is to hide content which flows outside the bounds of the container element, so I don't understand how that fixed this.

  4. #4
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    5,350
    Mentioned
    214 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by Eturnalshift View Post
    So the problem was Float? I never knew the height property of floated elements was ignored. Is that a correct way to understand the problem?
    Sounds fine to me. It's always referred to as the floated object being "taken out of the flow", so the parent doesn't "see" the contained div and doesn't know to contain it.

    Quote Originally Posted by Eturnalshift View Post
    Anyways, your solution worked! I added overflow: hidden to .fixedWidth and it fixed everything... but, how come? My understanding of overflow: hidden is to hide content which flows outside the bounds of the container element, so I don't understand how that fixed this.
    It's not my solution - and I've no idea why it works, only that it does. Paul O'B is widely credited with having invented/discovered this method, described in this article. As you can see, there are other methods of clearing a float, but this one is generally the easiest.
    Don't be arrogant. Be kind to a koala that thinks it's a bear.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    It's not my solution - and I've no idea why it works, only that it does. Paul O'B is widely credited with having invented/discovered this method, described in this article. As you can see, there are other methods of clearing a float, but this one is generally the easiest.
    All the solutions found available here are because a new block formatting context has occured. That's the real reason

    Quote Originally Posted by Eturnalshift View Post
    So the problem was Float? I never knew the height property of floated elements was ignored. Is that a correct way to understand the problem?
    The height property of floated elements aren't ignored. The parent just thinks it has nothing in it . Why would it have a height on itself if it thinks its' empty (static elements not included in what I'm talking about...)
    Anyways, your solution worked! I added overflow: hidden to .fixedWidth and it fixed everything... but, how come? My understanding of overflow: hidden is to hide content which flows outside the bounds of the container element, so I don't understand how that fixed this.
    There is a second use of it. Think of it as the "batman" of Bruce Wayne . Read the end of hte article I linked to and it has some links for further reading.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    Sounds fine to me. It's always referred to as the floated object being "taken out of the flow", so the parent doesn't "see" the contained div and doesn't know to contain it.
    Just for future reference and just general knowledge, this is similar to absolute positioning, which is removed from the flow as well. When an item is floated, though, it still retains some space, unlike absolute positioning.

    Imagine:
    Code:
    Absolute positioning:
    
    ------------
    | Absolutely |
    | Positioned |
    |            |                          [container somewhere over here]
    |            |
    -------------                         [/end container]
    
    Floated:
    
                                         [container somewhere over here]
                                           |                                 |
                                           |      Floated Box                |
                                           |                                 |
                                            ------------------------------
                                            [/end container]
    ~TehYoyo


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •