SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast Ude's Avatar
    Join Date
    Jul 2002
    Location
    Finland
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS that displays like a table?

    Hi guys,

    I'm struggling with a webpage I've done with tables and now I'd like it to use CSS-only. Instead of bringing the whole messy code of it, I'd like to just ask how can I make a <div>-element that functions like the following table:

    Code:
    <table>
      <tr>
        <td>left</td>
        <td>right</td>
      </tr>
    </table>
    So far I've tried this kind of code:

    Code:
    <div class="backgroundframe">
      <div class="leftside">Loads of text.</div>
      <div class="rightside">Less text.</div>
    </div>
    For the "leftside" class I've defined "float: left;", and it looks just right in Opera and IE, but in Mozilla the "backgroundframe" box doesn't expand with the "leftside" text (only with the "rightside" text).

    Am I taking a totally wrong approach of am I missing something? Sorry if my post is unclear.
    ~~~ude

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

    Do you mean something like 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>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #backgroundframe {
     width:50%;
     background-color:#ffffcc;
     padding:5px; 
    }
    #leftside {
     float:left;
     background:blue;
     width:49%;
    }
    #rightside {
     float:right;
     background:green;
     width:49%;
    }
    </style>
    </head>
    <body>
    <div id="backgroundframe"> 
      <div id="leftside">Loads of text.</div>
      <div id="rightside">Less text.</div>
      <div style="clear:both"></div> <!-- needed for mozilla -->
    </div>
    </body>
    </html>
    Paul

  3. #3
    Non-Member emstro's Avatar
    Join Date
    Jul 2003
    Location
    Florida
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah ha. You have discovered one of the biggest problems with CSS, and in my opinion, this sort of thing is what makes CSS layouts inefficient. There is no easy way to reproduce something like that.

    It's so easy to write a table with a couple columns, but if you want to do it in CSS, especially if it's a centered fixed width CSS layout, plan on doing LOTS of research.

  4. #4
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's quite a few good two column layout tutorials. This is the first one that caught my eye in Google but it looks good:

    http://nemesis1.f2o.org/articles



    I'm not actually doing web development enough at the moment you step by step what you might be doing wrong -- I've forgotten a bit myself but there are people who will be more use than me. In the meantime, do what I do now when I need to create something like this and I don't remember. Check out the online tutorials.

  5. #5
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    Do you mean something like this.

    Paul
    Ah ha! Help (AKA Paul) is at hand!

  6. #6
    SitePoint Enthusiast Ude's Avatar
    Join Date
    Jul 2002
    Location
    Finland
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Do you mean something like this.
    Wow! I mean ... WOW! Thanks Paul! It works perfectly! Without your code I probably would have been banging my head against this problem all night! Cheers, mate!

    And thanks to the others who replied too!
    ~~~ude

  7. #7
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    Queensland Australia
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    My GoD!!

    My God!

    I have been struggling with this for a long time.....

    That is amazing Paul........ wow. That has solved many problems that I still use tables to solve........very excellent!

    How do you figure this stuff out?


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
  •