Добрый день! Возникла такая проблема: требуется вывести каталог товаров в виде горизонтального списка. Но при добавлении float:left тэгу LI или Div (внутри LI), весь дизайн съежает...Кто может помочь советом? Буду благодарен. Вот скрины и код примерной схемы: Если нет float: И если добавить float:left тэгу LI или Div (внутри LI): <!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>Документ без названия</title> <style type="text/css"> <!-- #wrapper { background-color: #999999; height: 100%; width: 100%; } #wrapper #main { background-color: #FFFF00; width: 1000px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } #wrapper #main #zag { background-color: #000000; height: 50px; width: 500px; margin-left: 200px; } #wrapper #main #catalog { background-color: #FF0000; width: 900px; margin-top: 50px; margin-left: 50px; position: relative; } #wrapper #main #catalog li { list-style-type: none; } #wrapper #main #catalog ul { margin:0px; } #wrapper #main #catalog #cat { background-color: #009900; height: 150px; width: 250px; margin-top: 50px; float:left; margin-left: 25px; } #wrapper #footer { background-color: #3300FF; height: 50px; width: 100%; } #wrapper #main #catalog #test { background-color: #66FF00; height: auto; width: 850px; position: relative; margin:auto; } --> </style> </head> <body> <div id="wrapper"> <div id="main"> <div id="zag"></div> <div id="catalog"> <div id="test"> <ul> <li> <div id="cat"></div> </li> <li> <div id="cat"></div> </li> <li> <div id="cat"></div> </li> <li> <div id="cat"></div> </li> </ul> </div> </div> </div> <div id="footer"></div> </div> </body> </html>
