SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Force floated adjacent containers to expand to fit parent container

    I have a two li elements that are set to 50% width and floated left. The parent container is 600px wide. As long as each of the li elements contents extends to at least 300 pixels, all is well and the li elements take up the full width of the parent.

    However, when one or both of the li elements does not have enough content (text) to effect a 300px width, the elements fall short of filling the parent container.

    How can I force these elements to expand to fill 50% of the parent container, regardless of their contents?
    HTML Code:
    <div class="parent">
    <h4>Element Header</h4>
    <ul>
    <li>This element is short</li>
    <li>This element is a bit wider</li>
    </ul>
    </div>
    Code:
    .parent{
    width:300px;
    }
    ul{list-style-type:none;
    display:inline-block; //needed so that bottom border clears floats
    border-bottom:1px solid #ccc;
    }
    ul li{
    box-sizing:border-box;
    width:50%;
    min-width:50%;
    float:left;
    padding:0 2% 0 0;
    border:1px solid red;
    }
    UPDATE: The issue here is caused by the display:inline-block on the UL element. If I change that to display:block, the elements expand to fill the available space. However, now the bottom border of the ul does not clear the floats of the li element. overflow:hidden resolves that, however introduces other issues (ie, the whole thing disappears when the h4 element is set to display:none)

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,725
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    try this:
    Code:
    .parent{
    width:300px;
      border:1px solid red
    }
    ul{
    padding:0;
    list-style-type:none;
    display:inline-block; /*needed so that bottom border clears floats*/
    width:100%;
    border-bottom:1px solid #ccc;
    }
    ul li{
    box-sizing:border-box; 
    width:25%;
    float:left;
    padding:0 2% 0 0;
    border:1px solid red;
    }
    hope that helps


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
  •