How to make horizontal elements expand to cover available space?

Question

I am trying to create a CSS fluid tab menu with a variable number of tabs (similar to what you can see on Windows, where the tabs expand depending on the length of the contained header, see below).

Here is an example, I have a setting (I need to save the structure of the element):

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

When I squeeze the screen, the menu is divided into several lines, with the last element filling the remaining width:

My problem is expanding the elements in the "first line" to cover the available space after breaking the menu. Just setting min-width: 19% is a problem, but I can't get anything to work.

Question :
How can I make elements in a “line” (this is not really a line if it is split into several lines) occupy all the free space using only CSS?

EDIT :
Here is a sample page showing what I mean. Shorten the browser window and see how the elements behave. I am looking for a way to make the first line expand to the full width AFTER breaking a few lines.

UPDATE :
I updated the sample page. See here . I have no problem expanding the elements as long as they are all "on the same line." The problem begins when the line is "split" into several lines. I would like to know if it is possible to fill the top right space by making the elements expand across the screen.

Here are two more screenshots.

Therefore, the space next to the Four should be closed

Now the space next to the Three should close. You can see that this does not work by setting something to the Four element, because it will not always be in the upper right position. Rather, it should be a CSS rule that I set for all elements (I think).

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

Thanks for the help!

Answer 1

The first thing I can think of is that since you are already setting your .test div to display: table , maybe set .test .element to display: table-cell . This will keep them all on one line and just go as high as 100%. The only thing that <IE8 does not handle display: table-cell , but there are solutions around this. One of them is here . I'm not sure if this is really achieved exactly what you want, but this is an opportunity. However, I will think about the subconscious. Good question!

fiddle

Answer 2

You can only do this with a <table> with a width of 100%, for example:

 <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 a demo version.

Answer 3

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

check out this demo

Personally, I don’t think this is the best solution, but maybe it can help you as well. This demo is only ready to work on 2 lines

Answer 4

If you want to keep them on one line and use all the space that they have, no matter how many elements 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 you need

 <div class="menu"> <ul> <!-- Menus should usually be Lists if it 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 is all magic. Therefore, your cells always use full space.

If you need multi-line functionality, you need to use Javascript to check your window, and then run it in the two lists creating it

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