Question

I want to create some html.
In a div, which has a grey border, there should be two divs horizontally aligned. There should be a separating line between them.

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

I excluded all my tries to use float because it just doesn´t do what I want. Can anyone help?

Answer 1

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

When the second div has a width of 99px (to take into account the border I assume) then the floats seem to work fine.