P.Brian.Mackey P.Brian.Mackey - 3 months ago 12
CSS Question

Tabular layout of content without using a float

This code is layed out in 1 column. I want to get a tabular 2 column layout.

<span id="col1">
<div>Filter by</div>
<div>
<input type="text" value="hello" />
</div>
</span>
<span id="col2">
<div>Search</div>
<div>
<input type="text" value="hello" />
</div>
</span>


How can I achieve this without using float?

fiddle

Answer

You can use the flexbox for that:

.container {
  display: flex;
}
<div class="container">
  <div id="col1">
    <div>Filter by</div>
    <div>
      <input type="text" value="hello" />
    </div>
  </div>
  <div id="col2">
    <div>Search</div>
    <div>
      <input type="text" value="hello" />
    </div>
  </div>
</div>

Note that I changed your span to div elements (since span are inline and should not contain block elements). I also wrapped the entire block with div.container so I'll be able to set that container as the flexbox.