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

Тема в разделе "Верстка", создана пользователем same_ivan, 27 авг 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. same_ivan

    same_ivan Постоялец

    Регистр.:
    1 авг 2014
    Сообщения:
    115
    Симпатии:
    65
    Подгоняю тему magento под свои нужды.

    [​IMG]

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

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

    Mother.Board Писатель

    Регистр.:
    7 ноя 2013
    Сообщения:
    3
    Симпатии:
    0
    зделаи спомошю 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>
     
    Последнее редактирование: 27 авг 2014
  3. same_ivan

    same_ivan Постоялец

    Регистр.:
    1 авг 2014
    Сообщения:
    115
    Симпатии:
    65
    Фреймворк не катит =(
     
  4. Mother.Board

    Mother.Board Писатель

    Регистр.:
    7 ноя 2013
    Сообщения:
    3
    Симпатии:
    0
  5. Veysel

    Veysel Создатель

    Регистр.:
    17 июл 2011
    Сообщения:
    21
    Симпатии:
    5
    <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>
     
    same_ivan нравится это.
  6. simon.dp.ua

    simon.dp.ua Писатель

    Регистр.:
    29 июл 2013
    Сообщения:
    1
    Симпатии:
    0
    Да, верно:
    <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>