[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 262
  • Last Modified:

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.
0
FalconUK
Asked:
FalconUK
  • 6
  • 4
  • 2
2 Solutions
 
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
 
cLFlaVACommented:
Any certain width that the left "cell" should have?
0
Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

 
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
 
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
 
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

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 6
  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now