CODEWITHSUNDEEP
css
Imesh Chandrasiri
Imesh Chandrasiri

Reputation: 5679

how to expand width of child elements according to parent width

I've the following set of li in my DOM. But all them have only a min-width and the width is set to according to the elements inside each li.

Demo : link

parent css 

#parent{
    width:1024px;
    height:90px;
    background-color:black
}

what I want is to expand the li elements width to fit the entire width of the parent element. How can I achieve this using css3.

Thank you.

Upvotes: 1

Views: 660

Answers (6)

Michael Lawton
Michael Lawton

Reputation: 1510

One way is display: flex;: http://jsfiddle.net/kCRc3/18/
Another is display: table; http://jsfiddle.net/kCRc3/24/

display: table; may seem more concise, but there are several quirks such as alignment of cell contents that you need to be aware of.

Upvotes: 2

Martin Tale
Martin Tale

Reputation: 907

You can use css display: [table, table-row, table-cell] to expand elements in container.

Here is JSFiddle.

CSS:

#parent{
    width: 1024px;
    height: 90px;
    background-color: black;
    display: table;
}
#header {
    display: table-row;
}
.header-tile {
    display: table-cell;
}

Upvotes: 0

Danield
Danield

Reputation: 125423

Use text-align: justify; on the #header element.

Then stretch the content to take up 100% width

FIDDLE

#header {
    text-align: justify;
}

#header li {
    display: inline-block;

}

#header:after {
    content: '';
    display: inline-block;
    width: 100%;
}

Upvotes: 2

Conic
Conic

Reputation: 375

From your comments i guess that you want all list items in combination fill the width of their parent, not each single one of them (so that there's no remaining space in the ul).

One way of doing this is to set their display behavior to table, like in this fiddle: http://jsfiddle.net/SURzu/

If you don't have to fix the width of the ul, you could also set both ul and li tags to display: inline-block; to achieve this.

Upvotes: 0

user2663401
user2663401

Reputation:

To achieve it, you need to create new class-defining the remaining width i.e (parent width - all li width = remaining width) and add it to any of <li class="header-tile newWidth">i.e

.newWidth{
  width:100px; // this could be the remaining width
}

Upvotes: 0

Conic
Conic

Reputation: 375

If you set width: 100% to an element with display: block;, which is the case for any li element by default, then it will expand to the size of its parent.

In your example that would be the .header-tile.

Note that width is already introduced in CSS1 and there's no need for any CSS2 or CSS3 rule or setting.

Upvotes: 0

Related Questions