Подскажите пожалуйста, что я делаю не так? Есть два блока, они собственно так и называются block 1 block 2, хочу разместить их в одной горизонтальной плоскости, но при попытке дать блоку 1 float:left;блоки сцепляются, а при добавлении margine одному или другому блоку вместо того чтобы появлялось какое-то расстояние между ними, они просто начинают разваливаться. И если задать свойство float то ширина получается где-то 600пикс, хотя выставленна 200 и 600 для каждого блока соответственно.

Объясните пожалуйста, где я перемудрил :nea:

это безобразие можно увидеть здесь:
http://perunuslava.narod.ru/div.html





[CSS]
* {margin:0;padding:0;font-size:100.01%;}

.main {
background:#afafaf
url(/skins/img/foot_bl.jpg)
no-repeat
bottom;
width:600px;
padding-bottom: 20px;
margin:auto;
margin-top:20px;
margin-bottom:20px;
}
p {
font-family:Tahoma;
font-size:12;
padding: 0 20px 0px 20px;
text-align: justify;
text-indent: 10px;
}
.head {
background:#0042c7 url(/skins/img/head_bl.jpg) no-repeat left top;
font-family:Tahoma;
font-size:14;
font-weight:700;
text-align: center;
color:#fff;
}
.block {
background:#8e97cb url(/skins/img/bottom_round.jpg) no-repeat right bottom;
width:200px;
padding-bottom:15px;
margin:0 0 0 20px;
}

.block_nav {
background:#8e97cb url(/skins/img/bottom_round.jpg) no-repeat right bottom;
width:500px;
padding-bottom:10px;
margin:10px 0 0 20px;
}
.nav_art {
background:#8e97cb url(/skins/img/grad_round.jpg) no-repeat left top;
display:inline;
margin:0;
min-width:15;
padding:0;
float:left;
}
.nav_text {
background:#8e97cb url(/skins/img/grad_line.jpg) repeat-x;
display:block;
margin:0;
padding-top:2px;
font-family:Tahoma;
font-size:11px;
font-weight:700;
text-align: center;
color:#fff;
}

[/CSS]