Почему контейнер не открывается от вложенных блоков

[oke11o]

Здравствуйте. Вот кусок css и html.

/* menu structure */
.menu-row{ margin:5px 0px; border: solid 1px #bababa;background-color: #f5f8fb;  }   
    .row-prior { float:left; width:34px;font-size:0px; padding:10px 5px; }
    .row-pict { float:left; width: 20px; }
    .row-content { padding:10px; font-size:16px; }
    .row-tools { float:right; padding:10px; }
    .row-tools a { text-decoration: none; }

/* music structure */
.music-row { position: relative; margin:5px 0px; border: solid 3px #bababa;background-color: #f5f8fb; }   
	.music-block { position: relative; float:left;margin:5px 0px; border: solid 3px #222222;background-color: #00f800;  }   
	.music-prior { position: relative; float:left; width:34px;font-size:0px; padding:10px 5px; }




<div class="music-structure">
	<div class="music-row">
		music-row
		<div class="music-prior">
			<a href="./backend/music/prior/top/1" title="Вверх">
				<img src="./i/backend/prior_up.png" alt="Вверх">
				</img>
			</a>
			<a href="./backend/music/prior/down/1" title="Вниз">
				<img src="./i/backend/prior_down.png" alt="Вниз">
				</img>
			</a>
		</div>

		<div class="music-block">
			music-block
		</div>


		<div class="row-tools">
		    <a href="/backend/menu/delete/1" title="Удалить раздел " OnClick="if(!confirm('Вы действительно желаете удалить раздел ''?')) return false;">
		        <img src="./i/backend/folder_delete.png" alt="Удалить раздел">
				</img>
		    </a>
		</div>

	</div>
</div>

<div class="menu-structure">
	<div class="menu-row">
		<div class="row-prior">
			<a href="./backend/music/prior/top/1" title="Вверх">
				<img src="./i/backend/prior_up.png" alt="Вверх">
				</img>
			</a>
			<a href="./backend/music/prior/down/1" title="Вниз">
				<img src="./i/backend/prior_down.png" alt="Вниз">
				</img>
			</a>
		</div>

		<div class="row-content">
			<div class="row-pict">                    
				<a href="./backend/menu/objects/1" title="Изменить данные о композиции">
				<img src="./i/backend/music.png" alt="hysteria" align="top">
				</img>
			</a>
		</div>

		<div class="row-tools">
		    <a href="/backend/menu/delete/1" title="Удалить раздел " OnClick="if(!confirm('Вы действительно желаете удалить раздел ''?')) return false;">
		        <img src="./i/backend/folder_delete.png" alt="Удалить раздел">
				</img>
		    </a>
		</div>

		<div> <a href="./backend/menu/objects/1" title="Изменить данные о композиции"> hysteria</a>
		</div>

	</div>
</div>

Объясните, пожалуйста, почему элемент music-row не открывается от вложенных в него блоков.

[Softlink]

overflow:hidden; добавьте в класс music-row

[Gaspode]

Потому что вложенные блоки плавающие. Они из основного потока выпадают, обёртка их не "видит".

.music-row { position: relative; margin:5px 0px; border: solid 3px #bababa;background-color: #f5f8fb; overflow: hidden; }

решение.

Edited August 18, 2011 by Gaspode

[Softlink]

и к чему вложенным блокам задавать position?

[oke11o]

Спасибо. Помогло. Можно уточнить почему? Если бы была указана height, overflow обрезал бы все внутреннее до указанной высоты.

PS. position убрал.

Edited August 18, 2011 by oke11o

[oke11o]

Можно еще маленький вопросик по этим же стилям.

Как отцентровать блок music-prior по вертикали, чтобы он был посередине .music-block?