473,326 Members | 2,127 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

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

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
2 3396
AricC
1,892 Expert 1GB
Please post your code or a link.
Feb 7 '07 #2
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. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  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.             }
  14.  
  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>
  50.  
Feb 7 '07 #3

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

Similar topics

0
by: JB | last post by:
Hey ppl, I'm experiancing a very weird problem with my current Win32(win2k/XP) application. I'm using: * Delphi 7 * ADO * mySQL ODBC 3.51 drivers
0
by: Linda Cacina | last post by:
Hello all you fine folks, Here is some code I am using to merge data from a single record Access 2K3 table into a NEW word document based on a pre-defined Word merge template doc. All I want to...
8
by: fonzie | last post by:
Is it possible to have a data entry form where the information is stored in several different tables (5 or 6)? I have an inventory database where Table1 stores all of the data common to all...
2
by: shapper | last post by:
Hello, I am creating a simple CMS for a web site. The web site will hold many documents and for that I created Documents table which holds information on each document such as: Title,...
3
by: boston_dude | last post by:
So if I were to take table 1 and relate it to table 2 (one-to-one), I could then run a query which would display the records that are in both tables. I'm looking to run a query that would...
26
by: machineghost | last post by:
First off, let me just say that as someone with no DBA training whatsoever, any help I can get with this issue will be very, very much appreciated. My company recently migrated our database from...
1
by: pitjpz | last post by:
We have moved our Database to another server. The server it was on used SQL 4 and the new one its on now uses SQL5 the only problem we can find is that when you attempt to delete a record from...
5
by: matt | last post by:
This is a strange one but I've been stuck on it for days. Any help appreciated. THE PLAN: I've a database that I use a script to grab all the entries for a particular field. I then want to...
14
by: confusedfusion | last post by:
Not sure how many form submissions that have been lost over the years before I started but the company has a contact form that the required fields when validation fails the error message is going...
1
by: dorandoran | last post by:
The sort on the childgrid is not working; nothing happens when I click on the each column header for sort. (I followed Satay's sample: http://www.codeproject.com/KB/aspnet/EditNestedGridView.aspx)...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.