Help me with this div+css problem

Answer 1

The problem lies in your left div where you state "width can increase depending on the content". How is this width defined? The div to the right can expand to 100% of the remaining space but you must define the relationship between the left and the right divs by either providing a fixed width to the left div or providing a percentage to both that equals 100%.

Answer 2

Well, as you’ve probably seen, so.com used fixed width div’s to achieve your layout goal.

Obviously my first tries setting the width automatically failed, but maybe I’ve a useful workaround for you: use left and right floating of both boxes.

<div style="border: 1px solid #000000; width: 60%">
  <div style="border: 1px solid #444444; float: left;">
    some text
  </div>
  <div style="border: 1px solid #999999; float: right;">
    foo
  </div>
</div>

Of course this will only help if I understood your question correctly ;)

Answer 3

You could try the following:

<style type="text/css">
 #container {
  width:60%;
 }

 #content {
  width:100%;
 }

 #user-content {
  float:left;
 }
</style>

<div id="container">
 <div id="content">
  <div id="user-content">
   <p>This can change depending on what is in here.</p>
  </div>
  <!-- The rest of the page's content goes here. -->
 </div>
</div>

This makes the "content" div fill the rest of the space that "user-content" doesn't fill. It will only be an issue when your content is taller than the user content... but that's a different problem :)

This is another possiblity:

<style type="text/css">
 #container {
  width:60%;
 }

 #content {
  width:100%;
  float:left;
 }

 #user-content {
  float:left;
 }

 #page-content {
  float:left;
 }
</style>

<div id="container">
 <div id="content">
  <div id="user-content">
   <p>This can change depending on what is in here.</p>
  </div>
  <div id="page-content">
   <p>This should take up the rest of the space.</p>
  </div>
 </div>
</div>

Answer 4

As far as I know the only way to give your variable width container a variable width and float it to the left is to give it {width:auto;float:left;}

But I don't know if you can do anything useful with this because if you have text or a lot of small fixed width items to put in this container, they will keep expanding out along the first line until they've filled the width of the outer div before going on to the second line. They won't fill up the whole height and then push outward gradually as the text gets too much to contain.

Answer 5

Just a thought - you might be able to do some nifty JavaScript (possibly using jQuery?) which sizes those divs like you need them.