Better way to make side-by-side DIVs in CSS

Question

I have 2 DIV's that I want to be side-by-side under all circumstances. So far I am accomplishing it like this:

<div style="float: left">
    <table> ... </table>
</div>

<div style="float: right; overflow: scroll; width: 1000px">
    <pre> ... </pre>
</div>

However, I don't like that I have to specify an absolute width in the 2nd div.

I just want the 1st div to be the minimum width to display the table and 2nd div to take up the rest of the space without overflowing.

Is there a better way?

Answer 1

When you say "rest of the space" what do you mean. If your table was suddenly 3000px, what should happen?

I think a solution might be to wrap them in a third div:

<div style="width: 1500px;">
  <div style="float: left"> 
    <table> ... </table> 
  </div> 

  <div style="float: right;"> 
    <pre> ... </pre> 
  </div> 

  <div style="clear:both;"></div>
</div>

Answer 2

One way i've found quite versatile is to only float one of the divs. Float the left one and put that much padding on the right div. Here's an example of what i mean: http://jsfiddle.net/a6Bv8/ - i put one with an inner wrapper for borders or padding requirements to make it fluid, as well as the three column example..

#left { width:50%; float:left; }
#right { padding-left:50%; }

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

This is nice, too, to do three columns. You can float the first div to the left and give it it's width ( say 200px ), float the right column to the right and set its width (say 200px ) and set the padding on the third div to padding-left:200px;padding-right:200px (or 210 if you want a gap ).

Answer 3

If you don't mind ignoring ie6&7, this will work nicely:

<div style="white-space:nowrap;">
  <div style="display:inline-block;"> 
    blah
  </div> 

  <div style="display:inline-block;"> 
    blah
  </div> 

  <div style="clear:both;"></div>
</div>

There might be some ie hack that will make this work in that browser, check: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/