CODEWITHSUNDEEP
htmlcss
Georgi
Georgi

Reputation: 3

Make Div take up the remaining width

Basically I have 2 DIVs. One has a fixed width. Now I want the other one take up the remaining width.

I can only acheive this by putting the float on the fixed-width-div - which for me is the one to the right. But it only works when I swap out the DIVs in my HTML (right one comes first). I don't like having it this way.

So is there any way to get this exact setup, but without having to swap out the DIVs in my HTML?

Here's a JSFiddle for clarification

https://jsfiddle.net/MHeqG/1862/

HTML (When I put the left DIV first the float breaks)

<div id="wrap">
    <div id="right">
        right
    </div>
    <div id="left">
        left
    </div>
</div>

CSS

#wrap {
    width: 300px;
}
#left {
    width: 100%;
    background-color:#ff0000;
}
#right {
    float: right;
    width: 50px;
    background-color:#00FF00;
}

Upvotes: 0

Views: 399

Answers (3)

zgood
zgood

Reputation: 12571

You can try and use display:flex;, I think it gets you what you want.

Fiddle

Upvotes: 2

Adjit
Adjit

Reputation: 10305

You can make use of CSS calc() function

#wrap {
    width: 300px;
}
#left {
    width: calc(100% - 50px);
    background-color:#ff0000;
}
#right {
    float: right;
    width: 50px;
    background-color:#00FF00;
}
<div id="wrap">
    <div id="right">
        right
    </div>
    <div id="left">
        left
    </div>
</div>

Upvotes: 1

Dimitri
Dimitri

Reputation: 7013

Would this work?

https://jsfiddle.net/MHeqG/1864/

CSS:

#wrap {
    position:relative;
    width: 300px;
}
#left {
    margin-right:55px;
    background-color:#ff0000;
}
#right {
    position:absolute;
    top:0;
    right:0;
    width: 50px;
    background-color:#00FF00;
}

HTML:

<div id="wrap">
    <div id="left">
        left
    </div>
    <div id="right">
        right
    </div>
</div>

Upvotes: 0

Related Questions