CODEWITHSUNDEEP
cssresponsive-designmultiple-columns
Rob
Rob

Reputation: 957

How to make one column shrink while another stays at a fixed length in responsive design

I'm working on a site that has two columns and needs to be adaptive to responsive design. This doesn't seem like it would be a tough scenario, but for some reason I can't get the CSS to achieve what I want.

Column B (right) needs to stay a fixed length - 180px. Column A (left) needs to fill up all the space that Column B is not taking up with a 10px padding between them. I've been at it for a while but not getting the results I want.

When the site reaches a certain width, Column B drops below Column A and they both become 100% in width. I have that part working. Just need help with the shrinking Column A as the site shrinks. Thanks!

Upvotes: 1

Views: 838

Answers (1)

Oleg
Oleg

Reputation: 7397

http://jsfiddle.net/A4Psw/

Your HTML:

<div id="wrap">
    <div id="a"></div>
    <div id="b"></div>
</div>

Your CSS:

#wrap {
    display: table;
    height: 100px;
    width: 100%;
}

#a, #b {
    border: 1px solid red;
    display: table-cell;
}

#b {
    width: 180px;
}

Upvotes: 3

Related Questions