CODEWITHSUNDEEP
javascriptjquerycsscss-floatalignment
frequent
frequent

Reputation: 28503

how to make horizontal elements expand to cover available space?

I'm trying to create a CSS fluid tab menu, with a variable number of tabs (similar to what can be seen in Windows, where tabs expand depending on length of contained header, see below).

enter image description here

Here is an example, I have setup (I need to keep element structure):

<div class="test">
    <div class="element">
        <h3>
            <span class="dummy-a">
                <span class="dummy-ui-btn-inner">
                    <span class="dummy-ui-btn-text">very long text is this</span>
                </span>
            </span>
        </h3>
    </div>
     <div class="element">
        <h3>
            <span class="dummy-a">
                <span class="dummy-ui-btn-inner">
                    <span class="dummy-ui-btn-text">Two</span>
                </span>
            </span>
        </h3>
    </div>
     <div class="element">
        <h3>
            <span class="dummy-a">
                <span class="dummy-ui-btn-inner">
                    <span class="dummy-ui-btn-text">Three</span>
                </span>
            </span>
        </h3>
    </div>
     <div class="element">
        <h3>
            <span class="dummy-a">
                <span class="dummy-ui-btn-inner">
                    <span class="dummy-ui-btn-text">Four</span>
                </span>
            </span>
        </h3>
    </div>
    <div class="element">
        <h3>
            <span class="dummy-a">
                <span class="dummy-ui-btn-inner">
                    <span class="dummy-ui-btn-text">Five</span>
                </span>
            </span>
        </h3>
    </div>
</div>

And CSS: 

.test { width: 100%; display: table; }
.test .element { border: 1px solid red; float: left; min-width: 19%;  }
.test .element.prelast { border: 1px solid green; }
.test .element.last { float: none !important; overflow: hidden; }
.test .element h3 {  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

This will create the following:

enter image description here

When I shrink the screen, the menu breaks to multiple lines with the last element filling the remaining width:

enter image description here

My problem is expanding the elements in "the first row" to cover available space once the menu breaks. Simply setting min-width: 19% is the problem, but I can't get anything to work.

Question:
How would I make the elements in a "row" (it's not really a row, if it breaks into multiple rows) take up all the available space by using CSS only?

EDIT:
Here is a sample page showing what I mean. Shrink the browser window and see how the elements behave. I'm looking for a way to make the first row expand full width AFTER breaking into multiple lines.

UPDATE:
I have updated the sample page. See here. I don't have any problems expanding elements while they are all "in one row". The problem starts when the row "breaks" into multiple rows. I would like to know if it's possible to fill the top right gap by making elements expand all across the screen.

Here are two additional screenshots.

enter image description here

So the gap next to element "Four" needs to be closed

enter image description here

Now the gap next to element "Three" needs to be closed. You can see it does not work setting something on element "Four", because it will not always be at the top right position. Rather it should be a CSS rule I'm setting on all elements (I guess).

Also, if this can easily be done using Javascript/Jquery, I would also listen for ideas?

Thanks for helping out!

Upvotes: 7

Views: 1615

Answers (4)

GajendraSinghParihar
GajendraSinghParihar

Reputation: 9131

If you can use Javascript and jQuery there is a solution.

check this Demo

Personally I don't think this is the best solution but may be it can help you also this demo is prepared to work for only 2 rows

Upvotes: 1

Ria Weyprecht
Ria Weyprecht

Reputation: 1275

If you want to keep them in one row and using all the space that they have, no matter how many items you have, using display: table, table-row and table-cell is the actual solution. But you have to use all 3 of them to make it work. So what you need is

<div class="menu">
    <ul> <!-- Menus should usually be Lists if it's your choice -->
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
    </ul>
</div>

and then in css

.menu { display: table; width: 100%; }
.menu ul { display: table-row; width: 100%; }
.menu ul li { display: table-cell; }

that's all the magic. So your cells always use the full space.

If you want the functionality of multiple lines, you have to use some Javascript to check for your window with and then sperate them in two Lists making it

<div class="menu">
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
    </ul>
    <ul>
        <li>Five</li>
    </ul>
</div>

Upvotes: 1

Alfred
Alfred

Reputation: 21406

You may do this with just a <table> having width of 100% like;

<table class="menu" cellpadding="0" cellspacing="0">
<tr>
<td>menu1</td>
<td>menu2</td>
<td>menu3</td>
<td>menu4</td>
<td>menu5</td>
</tr>
</table>

and in CSS like;

.menu{
    width: 100%;
}
.menu tr td{
    height: 20px;
    background: gray;
    cursor: pointer;
    text-align: center;
}
.menu tr td:hover{
    background: white;
}

Here is the Live Demo.

Upvotes: 1

Scrimothy
Scrimothy

Reputation: 2536

The first thing I can think of is that since you're already setting your .test div to display: table, maybe set your .test .element to display: table-cell. This will keep them all in the same row and just expand to 100%. The only thing is that < IE8 doesn't handle display: table-cell, but there are solutions around this. One being here. I'm not sure if this really achieves exactly what you want, but it's a possibility. I'll keep my subconscious thinking about it though. Good question!

fiddle

Upvotes: 1

Related Questions