How come my parent container DIV height is 0px?

HTML & CSS
1

Hey guys… I have a series of DIVs with DIVs inside.

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

.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

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.

3

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

Sounds fine to me. :slight_smile: 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.

It’s not my solution - and I’ve no idea why it works, only that it does. :slight_smile: 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.

5

All the solutions found available here are because a new block formatting context has occured. That’s the real reason

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.

6

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:


Absolute positioning:

------------
| Absolutely |
| Positioned |
|            |                          [container somewhere over here]
|            |
-------------                         [/end container]

Floated:

                                     [container somewhere over here]
                                       |                                 |
                                       |      Floated Box                |
                                       |                                 |
                                        ------------------------------
                                        [/end container]

~TehYoyo