Now I'm wondering how to display 3 elements next to each other. I
came up with the following solution using float:left, but would like
opinions if this is the right way to go.
The idea is to have an outer div, which in my example below is
id="available". Inside this div is a table with float:left. Then is
another div with overflow:hidden, which will be on the right. And
inside this right div is the same pattern: that is, there is a div
with float:left, which will be on the left of the right box -- ie. so
it will be the middle element -- and there is another element, which
in my example is an input with overflow:hidden. It looks fine in
Mozilla 3 and IE 7.
My markup is correct this time per the validator.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>3 elements next to each other</title>
</head>
<body>
<div id="container">
<div id="available">
<!-- first element on left -->
<table style="float: left; margin-right: 1em;" border="1"
cellpadding="0" cellspacing="0">
<tr><td>Hello1</td></tr>
<tr><td>Hello2</td></tr>
<tr><td>Hello3</td></tr>
<tr><td>Hello4</td></tr>
<tr><td>Hello5</td></tr>
</table>
<!-- second/third element on right -->
<div style="border: thin solid red; overflow: hidden;">
<!-- second element on left -->
<div style="border: thick solid blue; float: left; margin-right:
1em;">
<input id="selectedDay" readonly="readonly" value="d/M/yyyy"
style="display: block; margin-bottom: 1em; width: 9em;" type="text"/>
<select id="availableTimes" size="5" style="width:
9em;"><option/></select>
</div>
<!-- third element on right -->
<input value="Button" style="overflow:hidden; height: 2em;"
type="button"/>
</div>
</div<!-- available -->
<p/>
</div<!-- container -->
</body>
</html>
