#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Location
    USA
    Posts
    140
    Rep Power
    12

    CSS: Table-less columns and wrapping


    I just need my page to display a text header, then list one block at a time. Each block will consist of two columns. One column will display data titles, the other will display the data.

    I thought I could accomplish this with CSS by nesting DIV tags, but it's not working the way I imagine it would.

    Here's my PHP code followed by the pertinent CSS:

    PHP Code:

        
    while($row mysql_fetch_array($result)){

            echo 
    "<div id=block>";

                echo 
    "<div id=column>";

                    echo 
    "Time: <br>Date: <br> Location: ";

                echo 
    "</div>";

                echo 
    "<div id=column>";

                    echo 
    $row['time'] . "<br>";
                    echo 
    $row['date'] . "<br>";
                    echo 
    $row['location'];

                echo 
    "</div>";

            echo 
    "</div>";

        } 
    CSS:

    PHP Code:

    #column {
        
    floatleft;
        
    line-height25px;
        
    margin3px;
        }

    #block {
            
    border:1px solid #999;
        
    margin:5px;
            
    top:20px;
            
    padding10px;
        } 
    This is definitely a problem with me not knowing CSS well enough.
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Location
    USA
    Posts
    140
    Rep Power
    12
    Hm. Threw a width: 100% into the block div... and that seems to do what I want it to.

    Still an ugly hack?
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Sep 2000
    Posts
    763
    Rep Power
    0
    Well, for starters you need to change the id's to classes as you can not have more than one element with the same id.
  6. #4
  7. mod_dev_shed
    Devshed Supreme Being (6500+ posts)

    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    14,817
    Rep Power
    1099
    If you want #block to contain .column, you need to float it as well.
    Code:
    #block
      {
      float: left;
      top: 20px;
      border: 1px solid #999;
      margin: 5px;
      padding: 10px;
      }
    .column /* column ids to classes in PHP */
      {
      clear: left;
      float: left;
      line-height: 25px;
      margin: 3px;
      }
    # Jeremy

    Explain your problem instead of asking how to do what you decided was the solution.
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Location
    USA
    Posts
    140
    Rep Power
    12
    Even nicer. Thanks for the help Eclipce and jharnois.

    Good luck with Lua, too.

IMN logo majestic logo threadwatch logo seochat tools logo