Создать горизонтально выровненные div в другом div

Question

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

<div style="width:400px; border-color:#D3D3D3; border-style:solid; border-width:1px;">
<div runat="server" id="plDiv" style="width:300px;">
    one
</div>
<div style="border-left:1px; border-left-style:solid; border-left-color:#D3D3D3; width:100px;">
    other
</div>

Я исключил все свои попытки использовать float, потому что он просто не выполняет то, что я хочу.Кто-нибудь может помочь?

Answer 1

См. Ответ, который я только что опубликовал здесь несколько минут назад:

Размер оболочки, отражающий его содержание

Это именно то, что вы спрашиваете.

В сущности, в контейнере есть 2 делителя и разделительная линия между ними:

Это можно увидеть здесь, на скрипке: http://jsfiddle.net/kWJ79/15/

Answer 2

<div style="width: 400px; border: 1px solid #D3D3D3;; overflow: hidden;">
  <div id="plDiv" style="width: 300px; float: left;" runat="server"> one </div>
  <div style="border-left: 1px solid #D3D3D3; width: 99px; float: left;"> other </div>
</div>

Когда второй div имеет ширину 99 пикселей (принимая во внимание границу, которую я предполагаю), тогда плавающие объекты работают нормально.