By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,880 Members | 1,817 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,880 IT Pros & Developers. It's quick & easy.

Strange CSS behaviour with display:table-cell for <select>

P: 4
Hello to those who read this, this is my first ever post!

I am currently getting very confused trying to put a <form> in a table-cell:

Firstly I have a <div> styled with display:table -this forms the "footer" box on my page.

Next I have two nested <div>s styled with display:table-cell that I want to appear side-by-side. I can put a little <p> inside each one with some text and all is well.

Now what I want in the end is a <form> with a <select> box in the left-hand table-cell and some <p>s and things on the right. When I put a <select> inside the <form> and refresh everything still looks ok... but as soon as I put any <option>s inside the <select> suddenly the left-hand cell pushes the right-hand cell down to the next line, so my cells are stacked on top of each other instead of side-by-side.

I've tried saying things like display:inline; margin:0 0 0 0; padding:0 0 0 0; and outline-width:0; to the <select> and <option>s, as well as to all descendants of the <div> and nothing puts my layout back how I want it. Does anyone know what I've done wrong?

And does anyone understand using display:table-column because it always makes everything disappear when I try?

Thanks :)
Feb 7 '07 #1
Share this Question
Share on Google+
2 Replies

Expert 100+
P: 1,892
Please post your code or a link.
Feb 7 '07 #2

P: 4
Hi, in fact whilst trying to break my doc down to a simplified version (to excuse you from getting a lot of pointless markup) I managed to solve the problem:
I could've sworn I'd already tried this but in the end all I did was insert an extra <div> wrapping the two cells and styled it as table-row. Still it is curious that the <option> children of a <select> should force the next cell down a line...

Here's the code anyway: :)
Expand|Select|Wrap|Line Numbers
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3. "">
  4. <html xmlns="">
  5.     <head>
  6.         <style type="text/css">
  7.             #top, #main, #bottom {
  8.                 display:table;
  9.                 text-align:center;
  10.                 border:thin solid black;
  11.                 width:98%;
  12.                 padding: 1%;
  13.             }
  15.             #left_column, #right_column {
  16.                 display:table-cell;
  17.                 width:50%;
  18.                 border:thin solid red;
  19.             }
  20.         </style>
  21.         <title/>
  22.     </head>
  23.     <body>
  24.         <div id="top">
  25.             <h1>Top bit</h1>
  26.         </div>
  27.         <div id="main">
  28.             <h1>Main bit</h1>
  29.         </div>
  30.         <div id="bottom">
  31.     <!-- Here's where i inserted the table-row <div> -->
  32.             <div id="left_column">
  33.                 <h1>Left</h1>
  34.                 <form action="">
  35.                     <fieldset>
  36.                         <select>
  37.                     <!-- and here's the offending elements -->
  38.                             <option>1</option>
  39.                             <option>2</option>
  40.                         </select>
  41.                     </fieldset>
  42.                 </form>
  43.             </div>
  44.             <div id="right_column">
  45.                 <h1>Right</h1>
  46.             </div>
  47.         </div>
  48.     </body>
  49. </html>
Feb 7 '07 #3

Post your reply

Sign in to post your reply or Sign up for a free account.