CODEWITHSUNDEEP
htmlcss
Grafit
Grafit

Reputation: 699

Dependent width on width of other elements in CSS

HTML:

<div>
 <ul>
  <li>ITEM</li>
  <li>CONTACT</li>
  <li><input type="text" placeholder="Zoeken..."></li>
  <li><img alt="shopCart" id="shopCart" href="image.jpg"></img></li>
 </ul>
</div>

CSS:

ul{
    height: 125px;
    width: 60%;
    margin: 0 auto;
}

li{
    list-style-type: none;
    float: left;
    padding: 20px 20px;
    margin: 31px 0;
    -webkit-box-sizing: border-box; /* Android ≤ 2.3, iOS ≤ 4 */
    -moz-box-sizing: border-box; /* Firefox ≤ 28 */
        box-sizing: border-box; /* Chrome, Firefox 29+, IE 8+, Opera, Safari 5.1 */
}

Now I want the width of li:nth-last-child(2) to depend on the width of the other elements. Like the ul is for example 1000px in width, the first, second and last li are together 300px witdth, I then want my nth-last-child(2) to be 700px in width.

So basically I want my li:nth-last-child(2) to be 60%-(width of other li's)

Edit:
width: calc(60% - 700px); would be a possibility, but I how do I find out the width of all the other li's?

JS is possible too

Upvotes: 3

Views: 3317

Answers (1)

Jesse Kernaghan
Jesse Kernaghan

Reputation: 4634

This can be done in CSS:

ul{
    height: 125px;
    width: 60%;
    margin: 0 auto;
    display:table;

}

li{
    display:table-cell;
    list-style-type: none;
    padding: 20px 20px;
    margin: 31px 0;
    -webkit-box-sizing: border-box; /* Android ≤ 2.3, iOS ≤ 4 */
    -moz-box-sizing: border-box; /* Firefox ≤ 28 */
        box-sizing: border-box; /* Chrome, Firefox 29+, IE 8+, Opera, Safari 5.1 */
}

li:nth-last-child(2){
   width:100%;
}

The last bit is the important part. It tells the 3rd item to take up as much space as possible.

Upvotes: 2

Related Questions