Как расположить три блока по горизонтали?

Zircool · December 2, 2011

Добрый день! Начинающий в всерстке,делаю пробный шаблон. Вот столкнулся с следующей задачей, внутри 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>

Друзья подскажите как выйти из этой ситуации? Заранее благодарен за помощь.

Gaspode · December 2, 2011

Нарисуйте, как должно выглядеть.

Zircool · December 2, 2011

On 12/2/2011 at 8:33 AM, Gaspode said:
Нарисуйте, как должно выглядеть.

Блоки 2 и 3 не должны быть внизу, а должны быть на уровне верхушки левого блока.

irinablue · December 2, 2011

используйте float:left;

только не надо нукуда clear:both;, достаточно для #content свойства overflow: hidden;

Sign In

Как расположить три блока по горизонтали?

Question

Zircool

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Gaspode

Link to comment

Share on other sites

Zircool

Link to comment

Share on other sites

irinablue

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information