SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast szigeti's Avatar
    Join Date
    May 2005
    Location
    Hungary
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Dynamic width elements in a fixed width row without table?

    I would like to create a fixed width row with the following dynamic width elements:
    • a label,
    • a full-width select,
    • and a button
    The width of these elements is dynamic because they must support multiple languages, but the select element should fill the space between the label and the button.

    My experiments were fruitless because the select would overflow to the right.

    This is what I am trying to implement without the table:

    HTML Code:
    <table width="500"><tbody>
    <tr>
      <td><label>Topic</label></td>
      <td width="100%">
        <select style="width:100%">
          <option>Whatever</option>
        </select>
      </td>
      <td><input type="button" value="Go!" /></td>
    </tr>
    </tbody></table>
    Any suggestions?
    Eat healthy,
    Exercise daily,
    Die anyway.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The only realistic way to do this is with a table as you have shown.

    You can do it in ie6 as follows:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    #outer{ width:500px;}
    input{float:right}
    span{display:inline-block;}
    label{float:left}
    * html select{width:100%}
    </style>
    </head>
    <body>
    <form action="">
     <div id="outer">
      <label>Topic </label>
      <input type="button" value="Go!" />
      <span>
      <select>
       <option>Whatever</option>
      </select>
      </span> </div>
    </form>
    </body>
    </html>
    However its probably not much use unless you just want to support IE.

  3. #3
    SitePoint Enthusiast szigeti's Avatar
    Join Date
    May 2005
    Location
    Hungary
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, this is a very interesting solution, although as you have suspected, I need to support other modern browsers as well.

    I have tried to make Firefox to obey with "-moz-inline-block" and "-moz-inline-box" display values, but they would not work. It seems that these values had absolutely no effect in this case.

    I guess then tables are not dead yet.
    Eat healthy,
    Exercise daily,
    Die anyway.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    I guess then tables are not dead yet.
    I don't think anyone can complain in this instance as the effect you want is really suitable to a table

    I did have a solution for mozilla but it used display:table and cell but it needed the html the other way around so wasn't suitable (and was a bit quirky anyway).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •