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

Tue Apr 19 12:04:51 CDT 2005

Quoting Chris Kavanagh <chris at logorocks.com>:

> 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.
>
> The paragraphs will be created on the fly by my client, so doing this
> needs to be extremely simple.  (He'll be using Contribute so I can
> train him to an extent.)
>
> The content might be text - one or several paragraphs - or it might be
> images.
>
> My instinct is to tell him to knock up a table each time with
> width:100% and a bgcolor, but I hear that using tables for presentation
> is considered by some to be somewhat gauche, so I wonder if such a
> thing is possible in CSS.

Here's one example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
	<title></title>
	<style>
	.test1 {
		display: block;
		width: 100%;
		background-color: Yellow;
		padding-bottom: 1em;
		padding-top: 1em;
	}

	.test2 {
		display: block;
		width: 100%;
		background-color: Aqua;
		padding-top: 1em;
		padding-bottom: 1em;
		text-align: right;
	}
	</style>
</head>

<body>
<div class="test1"><p>This is in test1</p></div>
<div class="test2"><p>This is in test2</p></div>
</body>
</html>

This is one of the basic building blocks of CSS.

Ken