Поплавок две рядом одна жидкость одна фиксированная

Question

Вот дилемма.

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

Мне нужно содержимое в list-one, чтобы развернуть 100% родительского div (list-container), если в list-two есть содержимое, я хочу, чтобы оба списка имели ширину 50% - плавающие рядом.

Что происходит, так это то, что список два завершает очистку списка один, а не всплывает вправо. Может кто-нибудь, пожалуйста, помогите? Вот что у меня есть:

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

Answer 1

Я работал над div, мне нужен блок твиттера, плавающий справа на 300 пикселей, а затем блок жидкого контента слева.Я всегда хотел оставаться мобильным, поэтому надеялся, что блоки будут перенесены на следующие строки, когда окно просмотра сократилось.

Это сработало для меня:

<div id="tw" style="display:inline; float:right; width:300px;">Tweets</div>
<div id="content" style="display:inline-block;">

Answer 2

Используйте display:table. Также добавьте скрытую разметку Internet Explorer. Некоторые из них выполняются вместе, потому что IE добавит пробелы, если вы не закрываете теги сразу после содержимого.

<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>

Это дает хорошее, предсказуемое, табличное поведение, но все еще использует семантическую разметку. Работает в IE 6+ и EOMB.

Примечание: я читал об этом где-то онлайн некоторое время назад. Я думаю, что это был блог. Если кто-нибудь может найти и поверить в источник, я был бы признателен. Я не могу найти это!

Если вы не хотите использовать display:table, вот код, который поможет вам приблизиться. Применяемая ширина составляет 50% от родительского контейнера + border + padding + margin, поэтому при разных значениях ширины она будет работать по-разному, но этот вид работает.

<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>