CODEWITHSUNDEEP
csswidth
faressoft
faressoft

Reputation: 19651

How to change width to fill the remaining space (CSS)

Take a look :

alt text

Result should be

alt text

Upvotes: 21

Views: 8638

Answers (2)

Peter
Peter

Reputation: 6669

Actually using css flex display can solve this easily.

Set the parent container to have 

display: flex;
align-items: stretch;
align-content: stretch;

Then the children will have flex-grow: 0;

Make the last child have flex-grow: 1;

Put #sidebar and #post_box in #content and then

#content { display:flex; align-items: stretch; align-content: stretch; }
#sidebar { float:left; width:280px; flex-grow: 0; }
#post_box { float: left; flex-grow: 1; }

Upvotes: 2

meder omuraliev
meder omuraliev

Reputation: 186762

#sidebar { float:left; width:280px; }
#content { margin: 0 0 0 280px; } /* dont float it */

http://jsfiddle.net/auTbG/1/

You will have problems if you have floats inside of #content and you try to clear them, though.

Upvotes: 20

Related Questions