Solved

CSS representation of a simple table layout

Posted on 2004-11-01
206 Views
Last Modified: 2006-11-17
Hi experts,

In an attempt to start ripping out all the tables in my site (sounds like furtinature removal!) I'm playing around with divs and spans.

I cant quite seam to get this well over used table design to behave its self using divs or spans, can someone give me a simple representation of this in css:

<table width="100%"  border="0" cellspacing="0" cellpadding="3">
  <tr>
    <td align="left" valign="top">This is my descriptive text, and this is my image to the right --&gt;</td>
    <td align="center" valign="top"><img src="/img/spacer.gif" alt="Spacer" width="250" height="250"></td>
  </tr>
</table>

I've got this all over my site at the moment, and would love to get rud of it.  These table layouts sit in a table cell at the moment (one step at a time!) but would idealy end up in a div when I get the time to modify the rest of it.
The left hand cell can be anywhere from 100px to 300px, depending on the image in it, so this needs to be flexable.

Thanks for you help.
ChrisB.
0
Question by:FalconUK
    12 Comments
     
    LVL 13

    Expert Comment

    by:cLFlaVA
    Something like this:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    <html>
    <head>
    <title>new document</title>
    <style type="text/css">
    #container {
        width: 100%;
          }

    #description {
        float: left;
    }

    #picture {
          width: 100px;
          float: left;
    }
    </style>

    </head>

    <body>
    <div id="container">
          <div id="description">This is my descriptive text, and this is my image to the right --&gt;</div>
          <div id="picture"><img src="/img/spacer.gif" alt="Spacer" width="250" height="250"></div>
    </div>
    </body>
    </html>
    0
     

    Author Comment

    by:FalconUK
    That kind of works, after switching the float property of the picture to right, it now lines up as it did in the table layout.

    But how do I put a nice border round the whole thing?
    I know I left it out of my above example, but I had a 1px solid #CCC border round the whole table, and if I apply that to the container DIV i just get a rather dissapointing tiny outlined div above my other two divs.  I'm guessing that this is because I have no other content in the container div, but other divs.

    It seams to me that tables gave you a much easier method of laying things out, I never experienced elements jumping all over my page, diseapering above and below each other until I started using divs.
    0
     
    LVL 13

    Expert Comment

    by:cLFlaVA
    Any certain width that the left "cell" should have?
    0
     

    Author Comment

    by:FalconUK
    The majority of images I have are 100px wide.
    0
     
    LVL 13

    Expert Comment

    by:cLFlaVA
    I understand that, but according to your sample, the image is in the right cell, what about the left cell?
    0
     

    Author Comment

    by:FalconUK
    Sorry, i missunderstood.

    The left description cell should take up the rest of the page width.
    0
     
    LVL 13

    Accepted Solution

    by:
    Like this?

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    <html>
    <head>
    <title>new document</title>
    <style type="text/css">
    #container {
        width: 100%;
          border: 1px solid #ccc;
    }

    #picture {
         width: 100px;
         float: right;
    }
    </style>

    </head>

    <body>
    <div id="container">
         <div id="picture"><img src="/img/spacer.gif" alt="Spacer" width="250" height="250"></div>
         This is my descriptive text, and this is my image to the right --&gt;
    </div>
    </body>
    </html>
    0
     

    Author Comment

    by:FalconUK
    Well...everything is perfect in IE, but not in Mozilla!

    Firefox only renders the border round the text, and not the whole DIV.

    Is there a fix for Mozilla?
    0
     
    LVL 19

    Assisted Solution

    by:dakyd
    You need a clearing element to extend the border to both the image and the text.  Basically, you can use cLFlava's code with one slight tweak.  Hope it helps.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    <html>
    <head>
    <title>new document</title>
    <style type="text/css">
    #container {
        width: 100%;
         border: 1px solid #ccc;
    }

    #picture {
         width: 100px;
         float: right;
    }

    .clear {
         clear: both;
    }
    </style>

    </head>

    <body>
    <div id="container">
         <div id="picture"><img src="/img/spacer.gif" alt="Spacer" width="250" height="250"></div>
         This is my descriptive text, and this is my image to the right --&gt;
         <div class="clear"></div>
    </div>
    </body>
    </html>
    0
     

    Author Comment

    by:FalconUK
    While that does put the border horizontally round the whole thing and not just the text, Mozilla is placing the image half out of the right hand side of the browser window, in both examples.

    In IE and the Dreamweaver IDE it looks perfect.
    0
     
    LVL 19

    Expert Comment

    by:dakyd
    That's actually the correct behavior given the CSS you specified (IE manages to muck things up with non standards-compliant behavior).  The #picture div has a width of 100px, and is floated right, so the div will take up the right-most 100px on the screen.  However, you specify a width of 250px for the image itself, so 150px worth of pictures (or about half of it) will be off-screen.  To fix it, either make the #picture div 250px, or else make the spacer image only 100px.  Either way, it'll get the full image on the screen.  Hope that helps.
    0
     

    Author Comment

    by:FalconUK
    Thanks, I missed the fact the div was only at 100.

    Must be half alseep.
    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to improve team productivity

    Quip adds documents, spreadsheets, and tasklists to your Slack experience
    - Elevate ideas to Quip docs
    - Share Quip docs in Slack
    - Get notified of changes to your docs
    - Available on iOS/Android/Desktop/Web
    - Online/Offline

    Suggested Solutions

    When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
    CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
    In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
    In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

    846 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    5 Experts available now in Live!

    Get 1:1 Help Now