<head>
<title>=)</title>
<style>
body {
font-size: 20px;
}
div {
border: 1px solid blue;
padding: 10px;
}
.menu {
width: 100px;
float: left;
clear: left;
}
#pic {
width: 50px; height: 50px;
float: right;
}
#content {
padding-left: 150px;
}
</style>
</head>
<body>
<div class='menu'>1<br>2<br>3</div>
<!-- <div class='menu'>4<br>5<br>6</div> -->
<div id='content'>
<div id='pic'></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc faucibus justo ac lacus sollicitudin ut bibendum risus eleifend. Duis ultrices nibh vitae dui dignissim accumsan. Donec dignissim auctor volutpat. Sed in elit justo. Maecenas orci diam, ornare pretium dictum ultrices, placerat sed quam. Nullam a molestie nibh. In vel mi non neque ullamcorper ultrices.</p>
</div>
</body>
Объясните, почему, если расскоментировать 2-е меню, то картинка съезжает?