CODEWITHSUNDEEP
htmlcss
Floyd
Floyd

Reputation: 23

How can I have a 2 column layout with one of the columns with a fixed width and the other with the remaining width?

I have a 2 column layout. The left column has a width of 300px. I would like the right column to take up the full width of the remaining monitor space. But I just can't figure out how this mixture of px and % can be made to work? Anyone have any ideas?

I guess at worse I can use js to get the user's viewport width and add some inline styles dynamically but then I would have to perform that on every window resize, etc. So I would much rather have a pure css solution.

Upvotes: 2

Views: 169

Answers (3)

NGLN
NGLN

Reputation: 43649

I would prefer thirtydot's answer:

Demo fiddle.

Minimum CSS requirement:

#sideBar {
    width: 300px;
    float: left;
}
#mainContent {
    overflow: hidden;
}

Upvotes: 1

mu is too short
mu is too short

Reputation: 434585

One approach is to float the fixed width column over to the left and then use a margin to simulate your other column. Something like this:

<div id="sidebar">
    <!-- ... -->
</div>
<div id="content">
    <!-- ... -->
</div>

And some CSS:

#sidebar {
    float: left;
    width: 300px;
}
#content {
    margin-left: 300px;
}

A <div> with its default display:block will naturally take up all the available width. The 300px left margin leaves an open space for the fixed width column.

Example: http://jsfiddle.net/ambiguous/wdsbu/

Upvotes: 1

mqchen
mqchen

Reputation: 4193

Here is a possible method for you: http://jsfiddle.net/mqchen/RDLMm/

Upvotes: 0

Related Questions