Float two side by side one fluid one fixed

Question

Here's the dilemma.

<div id="lists-container>
<ul id="list-one"></ul>
<ul id="list-two"></ul>
</div>

I need content in list-one to expand 100% of parent div (list-container), if list-two has content, I want both lists to be 50% widths -floating side by side.

What happens is that list-two ends up clearing list-one, rather than floating to the right. Can anyone please help? This is what I have:

#list-container{width:600px}
ul#list-one{display:inline; float:left}
ul#list-two{display:inline; float:right; width:50%}

Answer 1

Use display:table. Also put in some hidden Internet Explorer markup. Some of it is run together because IE will add white space if you don't close the tags right after content.

<div id="lists-container" style="display:table; width:100%">
  <!--[if lt IE 8]>
  <table border=0 cellspacing=0 cellpadding=0>
    <tbody>
  <![endif]-->
  <div style="display:table-row">
    <!--[if lt IE 8]>
      <tr>
        <td width="50%">
    <![endif]-->
    <div style="display:table-cell; width:50%">
      <ul id="list-one"></ul>
    </div><!--[if lt IE 8]></td><td width="50%"><![endif]-->
    <div style="display:table-cell; width:50%">
      <ul id="list-two"></ul>
    </div><!--if lt IE 8]></td></tr><!endif]-->
  </div><!--if lt IE 8]></tbody></table><!endif]-->
</div>

This gives you nice, predictable, table-like behavior but still uses semantic markup. It works in IE 6+ and EOMB.

Note: I read about this somewhere online some time ago. I think it was a blog. If anybody can find and credit the source, I'd appreciate it. I can't find it!

If you don't want to use display:table, here is some code that will get you close. The applied width is 50% of the parent container + border + padding + margin, so this will behave differently at different widths, but this kind of works.

<style type="text/css">
  #list-container {
    width:600px
  }
  ul#list-one {
    border:1px solid red;
    display:inline;
    float:left;
    width:49%;
    margin:0;
    padding:0;
  }
  ul#list-two {
    width:49%;
    padding:0;
    margin:0;
    border:1px solid blue;
    display:inline;
    float:left;
  }
</style>

<div id="lists-container">
  <ul id="list-one">
    <li>item 1</li>
  </ul>
  <ul id="list-two">
    <li>item 2</li>
  </ul>
</div>