Expanding div as much as possible with only css?

Question

This is what i am trying to do;

scheme

Is this even possible?

Divs take all available horizontal space already on default. (Unless it is floating) — Cthulhu
– Cthulhu, Commented Jul 14, 2013 at 13:01
@KhawerZeshan — No. 100% would include the space already taken up by the section marked "fixed width". — Quentin
– Quentin, Commented Jul 14, 2013 at 13:01
@Cthulhu — Presumably it is floating (or has some other properties applied to stop it taking up the whole width) since it is next to another element — Quentin
– Quentin, Commented Jul 14, 2013 at 13:02
@Quentin Flex is not well supported, especially IE will spoil the game, than you need to have 10 kinds of polyfills and stuff... — Mr. Alien
– Mr. Alien, Commented Jul 14, 2013 at 13:06

Mr. Alien · Accepted Answer · 2013-07-14 13:05:12Z

2

Do you mean something like this?

Demo

.wrap {
    height: 400px;
    border: 1px solid red;
}

.left {
    height: 400px;
    width: 120px;
    float: left;
    border: 1px solid green;
}

.max {
    height: 400px;
    margin-left: 130px;
    border:1px solid red;
}

Explanation: float: left; your first div and move other element to the right using margin-left: fixed-div-width + some extra space and than encapsulate both elements in a wrapper. Just a side note, don't forget to clear your floating elements

answered Jul 14, 2013 at 13:05

Mr. Alien

158k36 gold badges307 silver badges287 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

previous_developer Over a year ago

It's a bit dirty but it's required for cross-browser support, so i will use it. Thanks.

Mr. Alien Over a year ago

@m_poorUser nothing dirty here, this is the only way if you are ignoring the flex box, else you need to use scripts :)

previous_developer Over a year ago

I said dirty because you need to change .max's margin-left if you change width of .left. But hey, i've done worse things for compatibility :)

Mr. Alien Over a year ago

@m_poorUser haha yes, we are web dev.. so till we don't have a specific set of rules to follow and till browsers keep ignoring the wrong approaches, dirty will stay... always..

Collectives™ on Stack Overflow

Expanding div as much as possible with only css?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related