0

Верстаю такой макет

alt text

Футер прижат к низу страницы, в футере два дива, один прижат к левому краю, другой к правому. Не получается задать правильное позиционирование для правого дива. Код такой

<body>
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer">
        <div id="1">
            <p>text</p>
        </div>
        <div id="2">
            <p>text</p>
        </div>
    </div>
</body>

стили

body {
    background: #FFFFFF;
    color: #000000;
    font-family: Arial, sans-serif;

    max-width: 210mm;
    width: 210mm;
    max-height: 297mm;
    height: 297mm;

    position: relative;
}
div#content {
    padding:0 10mm 20mm 10mm;
}
div#footer {
    height: 15mm;
    position: absolute;
    bottom: 0;
    padding:0 10mm;
    color: #808080;
}

div#1 {
    float: left;
    font-size: 10pt;
}

div#2 {
    font-size: 7pt;
    position: absolute;
}

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

3 ответа 3

5
Вариант 1 (извращенский)
div#2 {
font-size: 7pt;
position: absolute;
right:100px; // растояие от края
}

Вариант 2 (нормальный)
#footer div {
display:inline-block;
}
div#2 {
float: right;
}
2
  • не работает вариант 2
    – Heidel
    19 авг 2012 в 16:01
  • Простите, зачем вы делаете блокам display:inline-block; а затем им даете float? ) (со вторым пунктом все понятно, но к чему inline-block?)
    – iKuzko
    20 авг 2012 в 9:56
2

RTFM1 SGML basic types

  • ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

RTFM2: HTML id Attribute

  • Must begin with a letter A-Z or a-z
  • Can be followed by: letters (A-Za-z), digits (0-9), hyphens ("-"), and underscores ("_")
  • In HTML, all values are case-insensitive

В врестке блоков очень удобно пользоваться фоном (background) чтоб понять что и как применилось из стилей. ваши стили просто не применялись из-за некорректных id.

Вот вам пример

1
  • да нет, не в id дело) у меня для этих дивов заданы имена, просто сюда я вынесла с цифрами, чтобы не загромождать код. за бэкграунды, кстати, спасибо, полезная штука, упустила из виду)
    – Heidel
    19 авг 2012 в 17:26
1

Float: right для второго float: left для первого профит

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.