Позициониране на 3 Div- a

[Dodo1987]

Здравейте колеги.
Имам предната дилема:
Трябва да направя 3 дива да изглеждат така:

Как ли не се мъчиих - 1 -во беше 1 и в него влизат 3-те.
2. Пробвах един основен и полсе за първи и втори - друг, и за див 3 отново друг.

И винаги имам проблемите че не искат да се нареждат както искам- винаги единия е отдолу под всички други или е най отдолу.
Ще приложа кода докъдето съм стигнал, ако може с нещо да помогне на някой да ми каже решение на проблема.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title></title>
<style type="text/css">
body{
background: #212121;
}

#con { 
width: 600px; 
padding: 0; 
margin: 0 auto; 
border: 2px solid white; 

} 

.CENTER{	
	BACKGROUND-COLOR: #828282;
	position: absolut;
	height: 600px;
	width: 295px;
	border: 3px solid green;	
}


.div1 { 
width: 295px; 
height: 50%; 
padding: 0; 
float: left;
background:#FFFF00;
} 

.div2 { 
width: 295px; 
height: 50%; 
padding: 0; 
float: left;
background:#330000;
} 

.div3 { 
width: 200px; 
height: 200px; 
padding: 0; 
border: 3px solid green; 
background: #212121;

} 
</style>
</head>
<body>	  
<div id="con"> 
   <DIV class="CENTER">
		<div class="div1" align="left">Горен</div> 
		<div class="div2">Долен</div>
   </DIV>
<div style="clear:right"></div>
<div class="div3">В средата</div> 
</div>
</body>
</html>

С този код изглежда така сега:

 

[jooorooo]

Създаваш 1 за контеинер, в него слагаш 2 дива, ляв и десен, в левия слагаш други 2 горе и долу и си готов

 

[Dodo1987]

Ами и това ми дойде наум но не успях с да ги сложа двата един до друг, винаги единия ми беше долу.
Прости са нещата, ама с CSS хич мен няма ...

 

[emagi]

Пробвай това:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title></title>
<style type="text/css">
body{
background: #212121;
}
#con {
margin:0 auto;
width:600px;
height:550px;
}
#left {
width:300px;
height:550px;
float:left;
}
#div1 {
width:300px;
height:50%;
background:#00FF01
}
#div2 {
width:300px;
height:50%;
background:#7f8000;
}
#right {
width:300px;
height:550px;
background:#010080;
float:left;
}
</style>
</head>
<body>

<div id="con">
<div id="left">
<div id="div1"></div>
<div id="div2"></div>
</div>
<div id="right"></div>
<div style="clear:both"></div>
</div>
</body>
</html>

Стойностите на мерните единици може да си ги промениш както ти искаш!

 

[shterev]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title> Добре дошли!</title>
<style>
.clear { clear:both;}
.center { width:600px; margin:0 auto;}
.left { float:left; width:295px;}
.right { float:right; width:200px; height:200px; background-color:#212121;}

.up { height:100px; background-color:#FFFF00;} /* няма нужда да задаваш widht , тъй като сега заема на главния , той е 295px*/
.down { height:100px; background-color:#330000;}

</style>
</head>
<body>
<div class="center">
<siv class="left">
<div class="up"></div>
<div class="down"></div>
</siv>
<div class="right"></div>
<div class="clear"></div>
</div>
</body>
</html>

 

[Dodo1987]

@emagi - Страшен си.
Стана перфектно. Благодаря ти много и ти дадох точица.

@shterev - Има някакъв проблем и не излизат както трябва - разместени са , а в различни браузери изглежда различно.