CODEWITHSUNDEEP
htmlcsswidthcss-float
Foobarbis
Foobarbis

Reputation: 735

HTML/CSS: Expanding a float-left element to remaining width of parent

For the life of me I can't figure this out. I have a container div with a specific width. And a few children div inside it. I want the last div to expand its width to fill in the remaining width left in the container. How can I do this?

Here's an example (also at http://jsfiddle.net/nbKAr/):

#container {
    width:200px;
    border: 1px solid red;
}
    
#container div {
    float:left;
    border: 1px solid black;
}
<div id="container">
    <div>a</div>
    <div>b</div>
    <div id="expandMe">expand me</div>
</div>

Let's say the divs with "a" and "b" combine for a total width of 50px. How can I make #expandMe 150px without using JavaScript?

Upvotes: 2

Views: 4075

Answers (3)

Shane O&#39;Connor
Shane O&#39;Connor

Reputation: 704

If you remove the float off your last item, with the #expandMe and then apply overflow:auto; to it, I think you'll get what you're looking for.

overflow: auto; after a floated element will cause the last element to fill the remaining space.

Here is my sample.

Upvotes: 17

jhanifen
jhanifen

Reputation: 4591

Larsenal is right, this can't be done with div's. You can go old school and use a table, or just get a little more decisive and have the width's defined.

Upvotes: 0

Larsenal
Larsenal

Reputation: 51196

Can't be done without Javascript.

You may find some clever way to achieve the look visually, but there's no reliable way to do exactly what you describe.

Upvotes: -1

Related Questions