Div

[nom3r1]

Някой може ли да ми направи като тези квадратчета или както се води там с див: http://web-tourist.net/project/nom3r1/div.jpg

 

[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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#main {
	width:900px;
	height:auto;
	margin:0 auto;
}
#first {
	width:600px;
	height:500px;
	float:left;
}
#second {
	width:300px;
	height:500px;
	float:left;
}
.firstBlock {
	width:580px;
	height:200px;
	border:solid 1px red;
	margin-top:15px;
}
.secondBlock {
	width:300px;
	height:300px;
	margin-top:15px;
	border:solid 1px blue;
}
</style>
</head>

<body>
<div id="main">
<div id="first">
<div class="firstBlock"></div>
<div class="firstBlock"></div>
</div>
<div id="second">
<div class="secondBlock"></div>
<div class="secondBlock"></div>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>

Размера може да ги го намалиш, ако трябва!

 

[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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#main {
width:600px;
height:auto;
margin:0 auto;
}
#first {
width:400px;
height:300px;
float:left;
}
#second {
width:200px;
height:300px;
float:left;
}
.firstBlock {
width:380px;
height:100px;
border:solid 1px red;
margin-top:15px;
}
.secondBlock {
width:200px;
height:200px;
margin-top:15px;
border:solid 1px blue;
}
</style>
</head>

<body>
<div id="main">
<div id="first">
<div class="firstBlock"></div>
<div class="firstBlock"></div>
</div>
<div id="second">
<div class="secondBlock"></div>
<div class="secondBlock"></div>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>

 

[nom3r1]

+1