2

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.

NGLN
  • 43,011
  • 8
  • 105
  • 200
Floyd
  • 23
  • 2
  • See [How to properly float two columns side by side with css](http://stackoverflow.com/questions/5589947/how-to-properly-float-two-columns-side-by-side-with-css). – NGLN Jul 09 '11 at 21:37

3 Answers3

1

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/

mu is too short
  • 426,620
  • 70
  • 833
  • 800
1

I would prefer thirtydot's answer:

Demo fiddle.

Minimum CSS requirement:

#sideBar {
    width: 300px;
    float: left;
}
#mainContent {
    overflow: hidden;
}
Community
  • 1
  • 1
NGLN
  • 43,011
  • 8
  • 105
  • 200
  • You're right the other solution failed when I zoomed out making the resolution very small in which case the right column had a smaller than the full page's width. But this works great. I tried this before posting but had a float left on the 2nd column which was causing it to fail. – Floyd Jul 09 '11 at 23:39
0

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

mqchen
  • 4,195
  • 1
  • 22
  • 21