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
    Commented 19 авг. 2012 в 16:01
  • Простите, зачем вы делаете блокам display:inline-block; а затем им даете float? ) (со вторым пунктом все понятно, но к чему inline-block?)
    – iKuzko
    Commented 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
    Commented 19 авг. 2012 в 17:26
1

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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