SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)

    Table-Cell Problem

    Ok I know about the bug or what have you in IE. The following code takes that into account, where things go wrong with when I try to place a DIV inside the SPAN. Here is code.

    Code:
    <style>
    div.table { display: table; }
    div.table span { display: table-cell; }
    </style>
    
    <div class="table">
    <span>
    hey
    </span>
    
    <span>
    hey
    </span>
    </div>
    That works corretly, but like I said, when I try to place a DIV inside the span, it farks up in IE.
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  2. #2
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In CSS layout, a div is a block element. A span is an inline element. You should never put a block element inside an inline element.

    Go read this for a bit more: http://www.brainjar.com/css/positioning/default.asp

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    display: table-cell; does not work in IE. It's just not up to the full CSS1 spec yet. Works in Gecko browsers and Opera though.

  4. #4
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    I need 3 column, but also need them all to grow in height, in 1 of the 3 does. Like a table. This there another way to accomplish this?
    Last edited by The New Guy; Apr 1, 2003 at 19:20.
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  5. #5
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    *forum glitch bump*
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  6. #6
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    How about this?
    Code:
    <!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>
    <title>Test?</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
     body {
      background-color: white;
      color: #036;
     }
     #main {
      margin: auto;
      width: 780px;
      border: 1px solid #036;
     }
     #left {
      width: 205px;
      float: left;
      padding: 5px;
      background-color: transparent;
     }
     #middle {
      float: left;
      width: 330px;
      padding: 10px;
      border-left: 1px solid #036;
      border-right: 1px solid #036;
     }
     #right {
      float: left;
      padding: 5px;
      background-color: transparent;
     } 
    </style>
    </head>
    <body>
    <div id="main">
     <div id="left">
      <p>Stuff.</p>
     </div>
     <div id="middle">
      <p>Stuff goes here.</p>
      <p>Stuff goes here.</p>
      <p>Stuff goes here.</p>
      <p>Stuff goes here.</p>	  
     </div>
     <div id="right">
      <p>Stuff.</p>
     </div>
    </div>
    </body>
    </html>
    As long as your center column is the longest one, everything will work. If your left and right columns will be longer than the center, then put the proper border attributes on those divs instead.


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
  •