Как сделать это грамотно?

same_ivan

same_ivan

Гуру форума
Регистрация
1 Авг 2014
Сообщения
115
Реакции
67
Подгоняю тему magento под свои нужды.

1409126944-c58ec-27kb.jpg


у общего контейнера max-width: 1300px;

На данный момент, блокам я задал float left и right. И центральному контейнеру ширину в процентах. Все работает нормально, кроме как в ie центральный блок почему-то соскакивает ниже боковых.
 
Последнее редактирование:
зделаи спомошю Bootstrap
Для просмотра ссылки Войди или Зарегистрируйся


<div class="container">
<div class="row">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-8">.col-md-1</div>
<div class="col-md-2">.col-md-2</div>

</div>
</div>
 
Последнее редактирование:
<html>
<head>
<style type="text/css">
.wraper{
margin:0 auto;
}

.main{
padding: 20px;
max-width: 1260px;
overflow: hidden;
background-color: blue;
}

.sidebar-l{
margin:0;
float:left;
width: 250px;
height: 250px;
background-color: red;
}

.sidebar-r{
margin:0;
float:right;
width: 250px;
height: 250px;
background-color: red;
}

.content{
margin: 0 10px;
float: left;
height: 250px;
width: 100%;
max-width: 740px;
background-color: green;
}
</style>
</head>

<body>
<div class="wraper">
<div class="main">
<div class="sidebar-l"></div>
<div class="content"></div>
<div class="sidebar-r"></div>
</div>
</div>
</body>
</html>
 
Да, верно:
<html>
<head>
<style type="text/css">
.wraper{
margin:0 auto;
}

.main{
padding: 20px;
max-width: 1260px;
overflow: hidden;
background-color: blue;
}

.sidebar-l{
margin:0;
float:left;
width: 250px;
height: 250px;
background-color: red;
}

.sidebar-r{
margin:0;
float:right;
width: 250px;
height: 250px;
background-color: red;
}

.content{
margin: 0 10px;
float: left;
height: 250px;
width: 100%;
max-width: 740px;
background-color: green;
}
</style>
</head>

<body>
<div class="wraper">
<div class="main">
<div class="sidebar-l"></div>
<div class="content"></div>
<div class="sidebar-r"></div>
</div>
</div>
</body>
</html>
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху