CODEWITHSUNDEEP
css-floatwidthcss
Matt Derrick
Matt Derrick

Reputation: 5724

display: inline-block and 100% height to achieve 'floating'

I have a <ul> <li> and I require the use of display: inline-block;. This is required in order to "float" the li's whilst the last element is 100% wide of it's parent container and there could be any amount of li's (floating would mean the amount of li's is finite depending on the width of it's containing element). So the total width of the <ul> will be greater than the width of the viewport.

This is fine except I require the "floated" elements to multiline and I expect all elements which are not multi lined to be 100% height of the <ul>.

I can achieve what I want by setting the height of the <ul> in JS but this is something I really do not want to do.

Here is a JS fiddle. http://jsfiddle.net/d5WBv/3/

Does anyone have a solution. I'm not sure if flexbox or display: table; can solve this but I cannot seem to get it to....

Thanks!

Upvotes: 3

Views: 11215

Answers (2)

avrahamcool
avrahamcool

Reputation: 14094

I have a CSS solution for you, check out this Working Fiddle

DownSide: it requires to Double the ul li elements, (one of them is for taking the real space in the document flow, (he don't render as we want but so will be hidden), and one of them is showed, on top of the other, with the display you want.

HTML:

<div class="Container">
    <ul class="Hidden">
        <li>This stays on one line</li>
        <li>And this</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor libero neque, nec tristique metus rutrum et. Integer semper libero quis magna placerat, a posuere sem congue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor libero neque, nec tristique metus rutrum et. Integer semper libero quis magna placerat, a posuere sem congue.</li>
    </ul>
    <ul class="Visible">
        <li>This stays on one line</li>
        <li>And this</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor libero neque, nec tristique metus rutrum et. Integer semper libero quis magna placerat, a posuere sem congue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor libero neque, nec tristique metus rutrum et. Integer semper libero quis magna placerat, a posuere sem congue.</li>
    </ul>
</div>

CSS:

*
{
    padding: 0;
    margin: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.Container
{
    position: relative;
}

.Hidden
{
    visibility: hidden;
}

.Visible
{
    position: absolute;
    top: 0;
    height: 100%;
}

ul
{
    white-space: nowrap;
    background-color: #cccccc;
    font-size: 0;
}
li
{
    display: inline-block;
    padding: 10px;
    border-right: 1px solid red;
    background-color: #2c2c2c;
    text-align: center;
    color: #fefefe;
    white-space: normal;
    vertical-align: top;
    font-size: 16px;
    height: 100%;
}

li:last-child
{
    width: 100%;
    border-right: 1px solid #2b2b2b;
}

Upvotes: 0

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18133

I guess, you mean that the li's all should have the same height?

If so, you could display them as table-cells:

ul {
    display: table;
    width: 100%;
}

li {
    vertical-align: top;
    display: table-cell;
    padding: 10px;
    margin: 0;
}

Also, check the updated fiddle.

Upvotes: 3

Related Questions