Gennady G Gennady G - 1 month ago 6
CSS Question

Table with two cells with CSS?

I want to get this result, but with no tables (with pure CSS):

enter image description here

With tables I can do something like this with one 'tr' and two 'td' tags, but how to do it without tables?

Here is jsfiddle



<table>
<tr>
<td>
<div id="inputs">
<p>Add some value:</p>
<input type="text"/>
<br/>
<input type="button" title="Press Ok" value="Ok"/>
</div>
</td>
<td>
<div id="choices">
<ul>
<li>some choice</li>
<li>some choice</li>
<li>some choice</li>
<li>some choice</li>
<li>some choice</li>
<li>some choice</li>
<li>some choice</li>
</ul>
</div>
</td>
</tr>
</table>




Answer

Ditch the table markup and use CSS:

#inputs, #choices {
  display:table-cell
}

#inputs, #choices {
  display:table-cell
}
<div id="inputs">
  <p>Add some value:</p>
  <input type="text" />
  <br/>
  <input type="button" title="Press Ok" value="Ok" />
</div>

<div id="choices">
  <ul>
    <li>some choice</li>
    <li>some choice</li>
    <li>some choice</li>
    <li>some choice</li>
    <li>some choice</li>
    <li>some choice</li>
    <li>some choice</li>
  </ul>
</div>

Comments