Javascript-форум - несколько горизонтальных списков по центру

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - несколько горизонтальных списков по центру (https://javascript.ru/forum/xhtml-html-css/6438-neskolko-gorizontalnykh-spiskov-po-centru.html)

несколько горизонтальных списков по центру

<!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>horizontal menu</title>

<style type="text/css">
<!--
.main_menu li {
	float: left;
	list-style: none;
	text-align: center;
	background: brown;
}

.main_menu li a {
	width: 100px;
	display: block;
	font-size: 12px;
	color: #fff;
	text-decoration: none;
}

.main_menu li a:hover {
	background-color: burlywood;
}
-->
</style>

</head>

<body>

<ul class="main_menu"> 
 <li><a href="#">item #1</a></li> 
 <li><a href="#">item #2</a></li> 
 <li><a href="#">item #3</a></li> 
 <li><a href="#">item #4</a></li> 
 <li><a href="#">item #5</a></li> 
 <li><a href="#">item #6</a></li> 
</ul>


<ul class="main_menu"> 
 <li><a href="#">item #1</a></li> 
 <li><a href="#">item #2</a></li> 
 <li><a href="#">item #3</a></li> 
 <li><a href="#">item #4</a></li> 
 <li><a href="#">item #5</a></li> 
 <li><a href="#">item #6</a></li> 
</ul>

</body>
</html>

работает замечательно но для одного списка , второй уже становится не на новой строке 8( как это бороть?
Кста непонятно почему свойство воздействует на родительский элемент .

Код:

.main_menu {

    overflow: hidden;

}

Замечу лишь, что Kolyaj предлагает абсолютно работающее решение, но есть кое-что, на что следует обратить внимание. При overflow:hidden браузер вынужден увеличить высоту объекта до самого нижнего флоата, однако не забывайте, что это все-таки overflow:hidden, иначе Вы можете сильно удивиться, куда это делся кусок элемента position:absolute внутри.

Если высоту ul увеличивать особо-то и не нужно, ограничьтесь clear: both, сэкономите немного нервов :).

спасибо. нервы сэкономили таблицы 8 )...надо буит заменить.
а почему свойство float передаётся за пределы блока?
Зачем использовать overflow: hidden; не по назначению?

В флоаты выпадают из основного потока. Соответсвенно, в нормальных браузерах блок-контейнер, если внутри него нет не-флоатов, занимает по высоте 0. Второй элемент располагается сразу после после первого, а его элементы присоседиваются к флоатам первого.

Понял, что ничего не объяснил. Короче, флоаты выпадают из основного потока и имеют особенности.

8 )) пасип, успешно пользую "clear: both"
~~флоаты выпадают из основного потока~~
ну нееее....они меняют его!!!! 8)))