CODEWITHSUNDEEP
htmlcss
funkyfly
funkyfly

Reputation: 1174

Make div use remaining width

I have found several post with similar problems, but none targeting my exact problem:

I am creating a menu with this HTML code:

<ul id="menu">
    <li id="item1">Item 1</li>
    <li id="item2" class="active">Item 2</li>
    <li id="item3">Item 3</li>
    <li id="item4">Item 4</li>
</ul>

What I want to do is to make the .active element use rest of remaining width on the page. I will make an click event on each LI to switch the active class.

Is it possible to do the width part with only css?

Here is the CSS I have so far:

ul#menu
{
   list-style:none;
   background: grey;
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   height: 50xp;
}

ul#menu li
{
   float:left;
   height:30px;
   border:1px solid black;
   width: 50px;
}

ul#menu li.active
{
    /* what to put here to make it use rest of widht */
}

Here is the jsfiddle to play with: http://jsfiddle.net/GMpeD/

Upvotes: 1

Views: 1301

Answers (4)

rahool
rahool

Reputation: 639

If you are fine with css3, you could use box-flex property.

box-flex property specifies how a box grows to fill the box that contains it.

Try this,

 #menu {
    width: 100%;
    padding: 0;       
    list-style: none;
    display: -moz-box; /* Mozilla */
    -moz-box-orient: horizontal; /* Mozilla */
    display: -webkit-box; /* WebKit */
    -webkit-box-orient: horizontal; /* WebKit */
    display: box;
    box-orient: horizontal;
  }

  .active {
    -moz-box-flex: 1;  /* Mozilla */
    -webkit-box-flex: 1; /* WebKit */
    box-flex: 1;
  }

Upvotes: 1

webdev11
webdev11

Reputation: 1

Instead of giving widths in px, set the widths in percentages.

So you could have the non-active each be 10%, and the active will be give a width of 70%

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201528

Style it as a table row, set width to 100% for both the table and the “active” cell, and prevent line breaks inside cells. Demo: http://jsfiddle.net/yucca42/jyTCw/1/

This won’t work on older versions of IE. To cover them as well, use an HTML table and style it similarly.

Upvotes: 4

Milad Naseri
Milad Naseri

Reputation: 4118

No. You have to add some JS that will monitor window size changes and adjusts your element accordingly.

Upvotes: 0

Related Questions