CSS representation of a simple table layout

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.
FalconUKAsked:
Who is Participating?
 
cLFlaVACommented:
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
 
cLFlaVACommented:
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
 
FalconUKAuthor Commented:
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
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

 
cLFlaVACommented:
Any certain width that the left "cell" should have?
0
 
FalconUKAuthor Commented:
The majority of images I have are 100px wide.
0
 
cLFlaVACommented:
I understand that, but according to your sample, the image is in the right cell, what about the left cell?
0
 
FalconUKAuthor Commented:
Sorry, i missunderstood.

The left description cell should take up the rest of the page width.
0
 
FalconUKAuthor Commented:
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
 
dakydCommented:
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
 
FalconUKAuthor Commented:
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
 
dakydCommented:
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
 
FalconUKAuthor Commented:
Thanks, I missed the fact the div was only at 100.

Must be half alseep.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.