Micard Micard - 3 months ago 8
CSS Question

Layout of 3 DIVs, where 2 are in one column

I am trying to make something like this:

|--------------------------------------------------------|-------------|
| | |
| DIV 1 | |
| | DIV 3 |
|--------------------------------------------------------| |
| DIV 2 | |
|--------------------------------------------------------|-------------|


I can't use a table for this. And I don't know if there's a way to just let them stack like that?

I tried it with the code below, but DIV 3 is not all the way at the top. It is actually exactly div2.height lower from the top.



#DIV_1 {
height: 125px;
width: 80%;
display: block;
float: left;
}
#DIV_2 {
width: 80%;
height: 15px;
display: block;
}
#DIV_3 {
display: block;
float: left;
height: 140px;
width: 20%;
}

<div class="row" style="width: 1024px; height: 140px;">
<div>
<div id="DIV_1"></div>
<div id="DIV_2"></div>
</div>
<div id="DIV_3">
</div>
</div>




Answer

Try this. I removed float and width from DIV_1 and DIV_2 and put it on the parent.

#DIV_0 {
width: 80%;
float: left;
}
#DIV_1 {
height: 125px;
}

#DIV_2 {
height: 15px; 
}

#DIV_3 {

float: left;
height: 140px; 
width: 20%;

}
<div class="row" style="width: 1024px; height: 140px;">

	<div id="DIV_0">           
		<div id="DIV_1">div1</div>
		<div id="DIV_2">div2</div>
	</div> 

	<div id="DIV_3">
	div3
	</div>

</div>