[thelist] How do I replicate this table behaviour in CSS?

[raskenbo]

On 4/19/05, Chris Kavanagh <chris at logorocks.com> wrote:
> Dear list,
> 
> I'd like certain paragraphs in my client's website to have a background
> colour.  The colour should fill 100% of the column, but the contents
> will usually be less than 100% wide.

<snip>
 
> The content might be text - one or several paragraphs - or it might be
> images.
 
<snip>
 
> Muchos gracias,
> CK.

Many ways to skin this cat...

Example for fixed width column:

<div style="background-color: #ccc; width: 450px;">
  <p>Content</p>
  <img src="img.gif" width="1px" height="1px" />
  <p>More content</p>
</div>

Example for relative width column:

<div style="background-color: #ccc; width: 100%;">
  <p>Content</p>
  <img src="img.gif" width="1px" height="1px" />
  <p>More content</p>
</div>

Of course using an external style sheet is a better way to go...

HTML

<div style="importantstuff">
  <p>Content</p>
  <img src="img.gif" width="1px" height="1px" />
  <p>More content</p>
</div

CSS

div.importantstuff
{
  background-color: #ccc; 
  width: 450px;
}

HTH

Ken Chase
Freelance Web Design
http://www.kenchase.com