CODEWITHSUNDEEP
responsive-design
Steve
Steve

Reputation: 1775

Fixed + Fluid layout

How do I create a 2 column layout, with 1 column fixed width, and the other column taking up the remaining space?

Please see this demo.

Originally, I tried a fluid layout, but didn't like the left column becoming too small, so I wanted to keep it at a constant width.

I tried setting the 2nd column's margin-left equal to the width of the first column, but this meant the 2nd column did not expand into all the available space. It took up only as much space as needed, which was not enough to keep the layout attractive.

How can I make the #right column fill all the left over space within #container?

Upvotes: 0

Views: 108

Answers (2)

Nils Kaspersson
Nils Kaspersson

Reputation: 9464

You might want to consider using media queries to trigger other CSS rules depending on the viewport size.

This should do what you're asking for:

@media only screen and (max-width: 960px) {

    #right { float: none; width: 100%; }

    #left { float: none; }


}

Upvotes: 0

Tim Wasson
Tim Wasson

Reputation: 3656

The easiest way is display:table. It's perhaps not the best way, but it works. You can see a fiddle I created with your code here:

http://jsfiddle.net/hp8Vg/1/

You could also use calc() in your CSS, but that is not as widely supported.

Upvotes: 1

Related Questions