CSS Div layout or table layout

Question

How can I get this layout for a simple form with CSS

------------------------------------------------------------------------------------------
|Date From | dropdown box | Date To | dropdown box| button|
------------------------------------------------------------------------------------------
grid or table


------------------------------------------------------------------------------------------

Answer 1

Are you planning to have an table layout below your first "row"? If so, then use tables. It's tabular data and that's what tables are planned for. People saying that you should not use tables but css instead mean that you should not use tables for layout but you can use them for tabular data.

If you're only planning to have that one row, you could try floating the elements to left. A bit like this:

css:

.selections div{float:left;}

html:

<div class="selections">
    <div>
        <label for="dateFrom">Date from:</label>
        <select id="dateFrom">...</select>
    </div>
    <div>
        <label for="dateTo">Date to:</label>
        <select id="dateTo">...</select>
    </div>
    <div>
        <input type="button" value="Button"/>
    </div>
</div>

I have not tested this code, there might be some mistakes, but it should give the general idea.

Answer 2

<ul>
<li>CONTROL</li>
<li>CONTROL</li>
<li>CONTROL</li>
<li>CONTROL</li>
</ul>

ul {
  list-style: none;
}

li {
  display: inline;
}

Where control is datefrom, dropdown, etc.

You may put borders if you want, too.

Answer 3

The biggest problem I've seen with tables is that if they have margins, they render differently in IE and other browsers and it's a pain. It's generally considered better practice to use divs instead as well.

Answer 4

For easy to make grid

http://www.pagecolumn.com/grid_layout_generator_wrapper_float.htm