3-col layout for multi-column input form

I am wrestling with creating a CSS layout that can contain a wide input form (see below for a stripped down version of the form I have). It looks great at 1024x768 and above, however at 800x600, the content of the form is too big to fit in the available real-estate. At the lower resolution, instead of wrapping like text, the form fields just spill into the right hand menu (and I don't really want the table to wrap anyway, as having each row spread over two lines is really hard to understand). Its a bit hard to describe, but very easy to see the problem if you look at the code I have attached when running at 800x600.

I've looked at at least 30 different 3-col layouts, and they all suffer from the same issue. So, any thoughts on how I might achieve this? Basically, I need to have the leftMenu/rightMenu placed on the left/right edge of the screen with the mainBody filling the gap between the two, *except* when the contents of the mainBody are too big for the viewing area - in which case the right menu should just flow after the body (and the user can scroll right).

Not normal, I know - but if you look at the input form, hopefully you will see my dilemma. Alternatively, am I better to just use a different CSS style for this page (and the few others that are like it?) Any advice would be much appreciated. Thanks a lot.


<html>
<head>
<style type="text/css">
 #left {
 width:100px;
 position:absolute;
 left: 0px;
 }
 #right {
 width:100px;
 float: right;
 right: -40px;
 }
 #main {
 left: 110px;
 position: absolute;
 width:50%;
 }
</style>
</head>
<body>
<div id="left">
 <ul>
 <li>menu 1</li>
 <li>menu 2</li>
 <li>menu 3</li>
 </ul>
</div>
<div id="main">
 <!-- this table is here to force firefox to wrap the entire form in the -->
 <!-- fieldset, otherwise, the fields flow outside the fieldset. ugh! -->
 <table><tr><td>
 <fieldset>
 <legend>Draw</legend>
 <form>
 <table>
  <tr>
  <th>Game No</th>
  <th>Round No</th>
  <th>Home Team</th>
  <th>Away Team</th>
  <th>Game Date</th>
  <th>Game Time</th>
  <th>Location</th>
  </tr>
  <tr>
  <td>1</td>
  <td><input size="2" type="text"></td>
  <td><select><option>Some team name goes here</option></select></td>
  <td><select><option>Another team goes here</option></select></td>
  <td><input size="10" type="text"></td>
  <td><input size="5" type="text"></td>
  <td><input size="20" type="text"></td>
  </tr>
  <tr>
  <td>2</td>
  <td><input size="2" type="text"></td>
  <td><select><option>Some team name goes here</option></select></td>
  <td><select><option>Another team goes here</option></select></td>
  <td><input size="10" type="text"></td>
  <td><input size="5" type="text"></td>
  <td><input size="20" type="text"></td>
  </tr>
  <tr><td colspan="5">And so on...</td></tr>
 </table>
 </form>
 </fieldset>
 </td></tr></table>
</div>
<div id="right">
 <ul>
 <li>menu A</li>
 <li>menu B</li>
 <li>menu C</li>
 </ul>
</div>
</body>
</html>

Hmm... I had indenting in the HTML, but the forums seems to have swallowed it. Sorry!
--
Edwardaux

3-col layout for multi-column input form

edwardaux

Fotiman

edwardaux

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week