I make up such a layout

alt text

The footer is pressed to the bottom of the page, in the footer there are two divas, one is pressed to the left and the other to the right. It is impossible to set the correct positioning for the right diva. Code such

<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>

styles

 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; }

Right div superimposed on the left. Tell me how to set the correct positioning for the second diva, so that he was pressed to the right edge?



    3 answers 3

     Вариант 1 (извращенский) div#2 { font-size: 7pt; position: absolute; right:100px; // растояие от края } Вариант 2 (нормальный) #footer div { display:inline-block; } div#2 { float: right; }
    • Option 2 Does n't Work - Heidel
    • Excuse me, why are you doing display: inline-block; and then give them a float? ) (with the second point, everything is clear, but why inline-block?) - iKuzko

    RTFM1 SGML basic types

    • ID and NAME tokens must be followed with the letter ([A-Za-z]) and hyphens ("-"), underscores ("_") , colons (":"), and periods (".").

    RTFM2: HTML id Attribute

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

    It is very convenient to use background (background) in the vreek blocks to understand what and how was applied from the styles. your styles were simply not applied due to invalid id.

    Here is an example

    • yes no, it's not in the id's case) I have names for these divs, I just brought the numbers here so as not to overload the code. for backgrounds, by the way, thanks, useful stuff, overlooked) - Heidel

    Float: right for the second float: left for the first profit