I would normally do this using a table

Forum Moderators: not2easy

Message Too Old, No Replies

I would normally do this using a table

Only now I know better......

trillianjedi

5:02 pm on May 26, 2005 (gmt 0)

OK, I know, tables have their place and this might be one of them, but I'm enjoying my exploration of what I can do with CSS and that's part of the fun right?

I want to achieve something that looks like this in the simplest possible manner with CSS:-

____________________________
Title
____________________________

Text

____________________________

There are meant to be left and right 1 pixel borders but Brett's double-char buster breaks ascii art on here ;-)

Title will be H3 and text will be a <p> of some kind.

I'd ideally like the title "block" and the "text" block to have different colour backgrounds.

A few of these will be listed vertically inside a center content DIV.

Is the easiest way to have 2 divs stuck on top of each other?

Thanks,

encyclo

5:49 pm on May 26, 2005 (gmt 0)

You shouldn't need extra

div

s because you can style your

h3

and

blocks directly. You need to get rid of the margins between them and use padding for spacing things out - that means that everything will join up nicely.

For example (with beautiful colors and fat borders to make things stand out):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {margin:0;padding:0;background:#ffe;}
#wrapper {width:500px;border:5px solid #c00;}
h3 {margin:0;padding:10px 20px;border-top:5px solid #00c;background:#cfc;}
p {margin:0;padding:10px 20px;background:#fcf;}
</style>
</head>
<body>

<div id="wrapper">
<h3>title</h3>
<p>text</p>
<h3>title</h3>
<p>text</p>
</div>

</body>
</html>

I'm not sure from your ascii art exactly what you are looking for, but the above should give you a good start.