Добрый день! Начинающий в всерстке,делаю пробный шаблон. Вот столкнулся с следующей задачей, внутри Id=content находится 3 блока, все эти три блока должны располагаться по горизонтали. Пробовал делать через float:left, а затем в футере прописывал clear:both; Но к сожалению футер постоянно залазил вверх на блоки id=conent. Тогда решил сделать через display:inline-block; но в таком случае все если растягивается первый левый блок, второй и третий блок смещается вниз. style.css @charset "utf-8"; { text-decoration:none; color: #000; } a:hover{ text-decoration:underline; } a img{ border:0; } b{ font-weight:bold; } i{ font-style:italic; } u{ text-decoration:underline; } br{ } p{ margin:15px 0; } body{ height: 100%; margin:0px; padding:0px; font-family: Arial; color: #000; font-size: 11px; background-image: url(images/7.gif); } #header{ height:200px; position:relative; width: 95%; margin: 20px auto; background:#fff; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:5px; -khtml-border-radius:10px; } #content{ height:auto; position:relative; width: 95%; margin: 20px auto; } #left-sidebar{ min-height:40px; position:relative; width: 20%; margin: 0 auto; background:#fff; /* float:left; */ display:inline-block; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:5px; -khtml-border-radius:10px; } #content-body{ min-height:40px; position:relative; width: 57%; margin: 0 auto; background:#fff; /* float:left; */ display:inline-block; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:5px; -khtml-border-radius:10px; margin:0 10px; } #right-sidebar{ min-height:40px; position:relative; width: 20%; margin: 0 auto; /* float:left; */ display:inline-block; background:#fff; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:5px; -khtml-border-radius:10px; } #footer{ min-height:30px; position:relative; width: 95%; margin: 20px auto; padding-top:10px; text-align:center; background:#fff; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:5px; -khtml-border-radius:10px; } #content h2{ padding:10px; text-align:center; text-transform: uppercase; font-size:16px; } #content ul{ margin-left:20px; font-size:13px; margin-bottom:20px; } index.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=utf-8" /> <link rel="stylesheet" type="text/css" href="reset.css" /> <link rel="stylesheet" type="text/css" href="style.css" /> <title>Абинское предгорье</title> </head> <body> <!--//Шапка сайта //--> <div id="header"> </div> <!--//Контент //--> <div id="content"> <!--// Левый сайдбар//--> <div id="left-sidebar"> <h2>Меню:</h2> <ul type="disc"> <li><a href="#">Ссылка</a></li> <li><a href="#">Ссылка</a></li> <li><a href="#">Ссылка</a></li> <li><a href="#">Ссылка</a></li> <li><a href="#">Ссылка</a></li> </ul> </div> <!--//Текст//--> <div id="content-body"> hghjg </div> <!--//Левый сайдбар//--> <div id="right-sidebar"> mnm </div> </div> <div id="footer"> © 2011 Абиское предгорье </div> </body> </html> Друзья подскажите как выйти из этой ситуации? Заранее благодарен за помощь.
