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?
<div class="parent">
<h4>Element Header</h4>
<ul>
<li>This element is short</li>
<li>This element is a bit wider</li>
</ul>
</div>
.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)
