Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

CSS representation of a simple table layout

Posted on 2004-11-01
12
Medium Priority
?
261 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
Comment
Question by:FalconUK
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
  • 2
12 Comments
 
LVL 13

Expert Comment

by:cLFlaVA
ID: 12462961
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
ID: 12463273
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
ID: 12463849
Any certain width that the left "cell" should have?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

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

Expert Comment

by:cLFlaVA
ID: 12464029
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
ID: 12464086
Sorry, i missunderstood.

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

Accepted Solution

by:
cLFlaVA earned 360 total points
ID: 12464117
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
ID: 12464431
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
dakyd earned 140 total points
ID: 12465648
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
ID: 12471174
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
ID: 12474735
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
ID: 12498229
Thanks, I missed the fact the div was only at 100.

Must be half alseep.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

610 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