css div input -- positioning inside a table <td>

**kbfirebreather** · 05-27-2008, 02:07 PM

I was hoping for some input on the best way to handle a layout inside a table cell is that I'm trying to accomplish.

heres a picture of what I'm looking for

1. is for a picture id
2. is for a title
3. is for a description

What would the simplest / most efficient way to pull this off?

I'm trying to use divs for my design, but this would be contained inside a...

HTML Code:

<table>
<tr>
<td> 
RIGHT HERE
</td>
</tr>
</table>

**wayfarer07** · 05-27-2008, 04:47 PM

It will be easier to help you if you will pick a more orthodox approach to layout. The most skilled people in this forum prefer not to use table cells for layout at all. You are better off using a div as a parent for the three elements, then floating the children left and right, with the description (3) clearing the right float so that it stays nicely tucked under the (2) element without breaking away from the (1). Here is a good place to learn about clearing and floating: http://www.quirksmode.org/css/clearing.html

**shivaji** · 05-27-2008, 06:13 PM

Quote:

The most skilled people in this forum prefer not to use table cells for layout at all.

But if you are atached for tables try somethig like that:

HTML Code:

<table width="718" border="0" cellpadding="0" cellspacing="0">
  <tr> 
    <td width="354" valign="top" rowspan="2">
      <div align="center">1</div>
    </td>
    <td width="364" height="71" valign="top">
      <div align="center">2</div>
    </td>
  </tr>
  <tr> 
    <td valign="top" height="352">
      <div align="center">3</div>
    </td>
  </tr>
</table>

**seocd** · 05-27-2008, 07:39 PM

if you are trying to do it all in one cell then you can use div float left for number one then create a div container that is floated right that contains 2 and three. Then inside the container put a seperate div for 2 and 3 then you will have to experiment with display modes to get it to be compatible with different browsers.

**Candygirl** · 05-28-2008, 05:30 AM

Quote:

Originally Posted by kbfirebreather

What would the simplest / most efficient way to pull this off?

Depends of the context:

are they fixed width? or could the text be expended with the window or with the font-size ?
will you use it just one time or with different sized images, container, as in a CMS ?
How should it act if the text is higher then the image ?

**HxcDesignerXD** · 09:56 PM

Quote:

Dont Use Tables use Div's

This is a 3 column Layout Using Div's

http://pmob.co.uk/temp/3colfixedtest_explained.htm

Code:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>
3 column CSS template </title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="noarchive" />
<meta name="keywords" content=" keywords here - SOME search engines still use them - and all search links count " />
<meta name="description" content="Short description - often used by search engines as real description" />
</head>
<body>
<div id="banner">
<p align="center">
<img src="http://you're domain/images/banner.gif" width=600 height=50 alt="alt stuff here" />
</p>
</div>
<div id="leftcontent">
<p align="center">
<br />
Sample Menu<br />
<br />
<a href=http://blah>
Make Template</a>
<br />
<br />
<a href="http://www.blah.com/scrollbar/">
Scrollbar Colors</a>
<br />
<br />
<a href="http://www.blah.com/feedback/">
Feedback Form</a>
<br />
<br />
<a href="index.php">
Fake Link</a>
<br />
<br />
<a href="index.php">
Fake Link</a>
<br />
<br />
<a href="index.php">
Fake Link</a>
<br />
<br />
<a href="index.php">
Fake Link</a>
<br />
<br />
<a href="index.php">
Fake Link</a>
</p>
</div>
<div id="centercontent">
<h1 align="center">
Heading 1</h1>
<h2 align="center">
Heading 2</h2>
<h3 align="center">
Heading 3</h3>
<p>
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p>
<p>
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p>
<p>
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p>
</div>
<div id="rightcontent">
<p align="center">
<br />
<p align="center">
<img src="sample.jpg" alt="alt stuff here" />
<br />
<br />
<img src="sample.jpg" alt="alt stuff here" />
<br />
<br />
<img src="sample.jpg" alt="alt stuff here" />
<br />
<br />
</p>
</div>
</body>
</html>

**kbfirebreather** · 05-29-2008, 12:27 AM

Quote:

Originally Posted by Candygirl

Depends of the context:

are they fixed width? or could the text be expended with the window or with the font-size ?
will you use it just one time or with different sized images, container, as in a CMS ?
How should it act if the text is higher then the image ?

Yes, they are fixed widths. Text would be a limited #of characters to fit the width.

idk...this is how I have it now. It seems to work, but I feel as if it's not concrete as to work universally.
Also....better to view in IE then FF. I'm not sure why it's doing what it's doing in FF....I normally have problems the other way around, works in FF but IE hates it.

http://faithcashdollar.com/photos.php?view=0

**LadynRed** · 05-29-2008, 10:27 AM

Quote:

better to view in IE then FF

No it's not. FF is still the more standards-compliant browser, even compared to IE7, most certainly over IE6. In general, FF will show you the CORRECT rendering, and IE will just get it wrong in one way or another.