I want to acomplish something like this:
(http://201.192.107.230)
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
div.data {
width: 70%;
margin-left: auto;
margin-right: auto;
}
.data div.header {
font-weight: bold;
background-color: #00FF00;
}
.data .header table{
width: 100%;
}
.data .header td{
width: 50%;
}
.data div.description{
background-color: silver;
line-height: 2;
}
.data .description table{
width: 100%;
}
.data .description td.content{
width: 70%;
}
.data .description td.image{
background-color: #FF0000;
text-align: center;
}
.data .description .image img{
width: 200px;
display: block;
padding: 1em 0;
margin-left: auto;
margin-right: auto;
}
/*]]>*/
</style>
</head>
<body>
<div class="data">
<div class="header">
<table>
<tr>
<td>This text<br />
can be multilined</td>
<td>And this box must be the same height as the one on the
left</td>
</tr>
</table>
</div>
<div class="description">
<table>
<tr>
<td class="content">
<p><em>Some title</em></p>
<p>Some content<br />
that must be multilined<br />
I want the image box (the red one)<br />
having the same height<br />
of this box<br />
I tried with css<br />
and divs, but I couldn't</p>
<p><em>Some footer</em></p>
</td>
<td class="image"><img
src="http://antwrp.gsfc.nasa.gov/apod/image/sun_skylab.gif" />
<a href="#">More images...</a></td>
</tr>
</table>
</div>
</div>
</body>
</html>
It's also here: http://201.192.107.230
But I wanted to do do it without tables at all... any sugestion, I've
been trying for about two whole days and I can't figure out a way to do it.
Any help would be appreciated
Thanks.