Проблема с div-ами...

Mark Ghaphes · September 18, 2011

Есть некоторая задача:

"Сделать два резиновых столбца. Первый — 20% по ширине, второй — 80%, между ними расстояние 20 пикселей, расстояния от краёв страницы слева и справа 10 пискелей. Без использования таблиц и javascript."

Мой вопрос такой:

Как сделать расстояние 20px. между колонками, если 20%+80%=100% т.е. вся доступная ширина, которая исключает еще какие-либо размеры вроде "20px".

Un1x · September 18, 2011

Сделай так


#left {
width: 20%;
height: 500px;
background-color: blue;
float: left;
margin: 0 10px;
}

#right {
width: 76%;
height: 500px;
background-color: red;
float: right;
margin-right: 10px;
}

Mark Ghaphes · September 18, 2011

А вот в этом-то и дело, что создать расстояние в четыре процента и я смогу, только нарушается условие задачи "...правая колонка - 80%...".

Un1x · September 18, 2011

ммм... сообразил. юзай padding

Mark Ghaphes · September 18, 2011

Padding создает внутренние отступы в четырёх направлениях, среди которых нет направления "между"...поэтому создавать обьединяющий контейнер для использования паддинга нет смысла, а если использовать margin, то он вытесняет правый контейнер...

Softlink · September 18, 2011

ну а блок вставить между контентом и левым блоком? Шириной в 20пк.

Un1x · September 18, 2011

On 9/18/2011 at 7:13 PM, Mark Ghaphes said:
Padding создает внутренние отступы в четырёх направлениях, среди которых нет направления "между"...поэтому создавать обьединяющий контейнер для использования паддинга нет смысла, а если использовать margin, то он вытесняет правый контейнер...

)) значит padding-left

Edited September 18, 2011 by Un1x

Mark Ghaphes · September 18, 2011

Ну я же пишу левый - 20%, правый - 80%, вместе - 100%. Это значит что, что бы вставить между ними блок, его прежде всего нужно поместить в общий контейнер вместе со всеми остальными, и назначить ширину, которой нет, потому что левый и правый занимают 100% ширины.

Un1x · September 18, 2011

On 9/18/2011 at 7:40 PM, Mark Ghaphes said:
Ну я же пишу левый - 20%, правый - 80%, вместе - 100%. Это значит что, что бы вставить между ними блок, его прежде всего нужно поместить в общий контейнер вместе со всеми остальными, и назначить ширину, которой нет, потому что левый и правый занимают 100% ширины.

так если 100% - это вся ширина экрана, то о чём ты говоришь просто не возможно)) делай отступ у одного из блоков и всё

Mark Ghaphes · September 18, 2011

Мне эту задачу один из опытных верстальщиков дал, хотел проверить меня на мою базу знаний, прежде чем принять меня на работу.

Вот я и думаю, в ком сомневаться, в себе, не опытном, или в нем, который имеет хороший стаж?..

troll · September 18, 2011


.sidebar-wrap, .content-wrap {float: left;}
.sidebar-wrap {width: 20%;}
.content-wrap {width: 80%;}
.sidebar, .content {margin: 0 10px;}

<div class="sidebar-wrap">
  <div class="sidebar">sidebar</div>
</div>
<div class="content-wrap">
  <div class="content">content</div>
</div>

Edited September 18, 2011 by troll

Mark Ghaphes · September 18, 2011

troll, лично у меня, этот код, не дает нужного результата, ни в одном из браузеров...

troll · September 18, 2011

Мой код делает 2 колонки, занимающие в определенной пропорции всю ширину окна и разделенные заданным расстоянием. Если это не то, что вам нужно, значит, я неверно понял задачу.

Mark Ghaphes · September 18, 2011

Ваш код, troll:


<html>
  <head>

    <title>Nothing</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <style>
      body {background-color:white; color:white;}
      .sidebar-wrap, .content-wrap {float: left;}
      .sidebar-wrap {width: 20%; height:500px; background-color:black;}
      .content-wrap {width: 80%; height:500px; background-color:grey; }
      .sidebar, .content {margin: 0 10px;}
    </style>  

  </head>
  <body>

    <div class="sidebar-wrap">
      <div class="sidebar">sidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebar</div>
    </div>
    <div class="content-wrap">
      <div class="content"><p>contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent</p></div>
    </div>

  </body>
</html>

Результат:

Такая же ситуация во всех браузерах. Что не так?

troll · September 18, 2011

Отсутствует доктайп (хотя в данном случае, наверное, он ни на что не повлияет)
Фон нужно назначать внутренним слоям - sidebar и content
Между словами стоит расставить пробелы, чтобы убрать полосу прокрутки

Edited September 18, 2011 by troll

Mark Ghaphes · September 18, 2011

Я присвоил фон внутренним слоям как вы и сказали. В принципе, ваш код очень даже рабочий и по сути задача решена. Благодарю...

Edited September 18, 2011 by Mark Ghaphes

Delka · September 19, 2011

Кстати задачку можно решить используя только 2 div, а при желании - даже не используя body в качестве wrapper'a.

Без CSS3

troll · September 19, 2011

Delka, а в IE 7 будет работать?

Delka · September 19, 2011

Даже в IE6. Причём без хаков для обычной версии.

SelenIT · September 20, 2011

Хм. Заинтригован, много думаю. Интересно, коммент перед доктайпом за хак для основной версии считается?..

Delka · September 20, 2011

Конечно считается.

Всё работает в standard compliance mode.

SelenIT · September 20, 2011

Пока смог придумать только вариант с абсолютным позиционированием одного из блоков. Либо без, но только для жестко фиксированной высоты всей конструкции. Насколько понимаю, не то... думаю дальше. IE6 без хаков особенно занимает, по идее, решение должно быть не просто простым, а простым до безобразия...

Delka · September 20, 2011

Решение - три строки, 8 правил на весь css.

Высота не фиксирована в обоих случаях.

runet · September 20, 2011

Интересное задание.

А можно попробовать так.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    html, body {
      font-size: 100.01%;
      height: 100%;
      margin:0;
      padding:0;
    }
    body {background-color:white; color:red; font-weight: bold; font: 0.75em/1 "Verdana"; padding: 0 10px; overflow: hidden;}
        div.wrapper {
          width: 80%;
          float: right;
        }
            div.content {
                margin: 0 0 0 20px;
                background: #CCFF99;
            }
        div.sidebar {
          width: 20%;
          background: #CC9900;
        }
    </style>

  </head>
<body>
    <div class="wrapper">
        <div class="content">content</div>
    </div>
        <div class="sidebar">sidebar</div>
</body>
</html>

troll · September 20, 2011

По-моему, пропорция нарушена: сайдбар на 10px шире, чем должен быть.

runet · September 21, 2011

это почему же sidebar на 10px шире

Edited September 21, 2011 by runet

Sign In

Проблема с div-ами...

Question

Link to comment

Share on other sites

48 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information