How can I build that in CSS?

[liunx]

I know how to build that thing with tables no problem but I want to try to get it done in CSS. How can I do it?

Thanks!Is that white space below the red supposed to be a separate "cell" or do you just want the three different cells?<style>
#leftcol {
float: right;
border: 1px solid #fff;
}
#lttop {
background-color: #000;
height: 400px;
}
#ltbtm {
background-color: #00f;
height: 200px;
}
#rightcol {
background-color: #f00;
}
</style>






------ html ------

<div id="lefttcol">
<div id="lttop">
left top cell
</div>
<div id="ltbtm">
left bottom cell
</div>
</div>
<div id="rightcol">
</div>I want to have white space where's the red.

Man, that's easy... I made way more complicated.are you sure that's the way to go?the left column floats right?here's what I made out of it:


#leftcol {
float: right;
border: 1px solid #fff;
}
#lttop {
background-color: #000;
height: 300px;
width: 200px;
}
#ltbtm {
background-color: #00f;
height: 100px;
width: 200px;
}
#rightcol {
background-color: #f00;
height: 100px;
width: 200px;
}


There's nothing on the right side (I used the sme HTML that pawky wrote).Rough draft.
CSS

#leftcol {
width: 200px;
float: left;
}
#ltop {
padding: 30px 0;
color: #fff;
background-color: #000;
}
#lbottom {
padding: 30px 0;
background-color: #689;
}
#cont {
padding: 30px 0;
background-color: #f00;
}

HTML

<div id="leftcol">
<div id="ltop">
<p>Foo</p>
</div>
<div id="lbottom">
<p>Bar</p>
</div>
</div>
<div id="cont">
<p>Blah blah</p>
</div>Originally posted by weee
here's what I made out of it:


#leftcol {
float: right;
border: 1px solid #fff;
}
#lttop {
background-color: #000;
height: 300px;
width: 200px;
}
#ltbtm {
background-color: #00f;
height: 100px;
width: 200px;
}
#rightcol {
background-color: #f00;
height: 100px;
width: 200px;
}


There's nothing on the right side (I used the sme HTML that pawky wrote).

just add some text in here: <div id="rightcol">
</div>
and it will work.