There is a code (simplified):

<div id="main"> <div id="left">Прижат ЛЕВО-ВЕРХ</div> <div id="right">Прижат ПРАВО-НИЗ</div> </div>

Here, once again, I am convinced that I have problems with css-positioning and cross-browser compatibility.

In general, the problem: you need the following css-code. The main block should stretch in width based on the width of the internal blocks. And the height is also based on the greatest height of the indoor unit. Block left-you need to press the top left relative to the main. The right block is on the lower right, as well as on main.

Did this:

 div#main { position: relative; display: inline-block; width: auto} div#left {width: 500px} div#right {position: absolute;bottom: 0;right: 0}

But as a result, it turns out that main is stretched across the width of the entire page, and not according to its content.

    1 answer 1

    I offer 2 options for solving your question ( to work correctly in all browsers, you need to change the encoding ): First method : almost exactly what you wanted to implement initially was implemented, so:

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org /TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ru"> <head> <title>Блоки</title> <meta http-equiv="Content-Type" content="text/html; charset:windows-1251"/> <style type="text/css"> html, body { width: 1000px; height: 700px; } div#main { width: 500px; border: 1px solid black; } div#left { width: 100px; height: auto; border: 1px solid green; } div#right { width: 100px; height: auto; border: 1px solid red; margin-left: 398px; } </style> </head> <body> <div id="main"> <div id="left">Лево-вверх</div> <div id="right">Право-низ</div> </div> </body> </html>

    The height of the blocks is built depending on the height of the contents. and the height of the “main” container varies depending on the height of the left and right blocks contained in it. What was the problem : misunderstanding of the concepts of auto and 100% . Sometimes the browser considers these concepts identical. All the more, if you do not specify absolute dimensions anywhere (at least for the width and height of the whole page). I have somehow described this situation in which of the questions for example in this . You can read if interested. In addition, the use of absolute dimensions helps to avoid a large number of IE block-model interpretations by browsers, because after setting the width or height, the element has the property hasLayout and the browser practically stops to naughty. In this case, the browser understands width: auto for the right block as “occupy 100% of the width of the parent block”. Tip : do not hesitate to absolute size. Even if you want to implement a rubber layout.

    The second way :

    The second method already implements my idea with a floating model.

     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ru"> <head> <title>Блоки</title> <meta http-equiv="Content-Type" content="text/html; charset:windows-1251"/> <style type="text/css"> html, body { width: 1000px; height: 700px; } div#main { width: 500px; height: 300px; border: 1px solid black; } div#left { width: 100px; height: auto; border: 1px solid green; float: left; } div#right { width: 100px; height: auto; border: 1px solid red; float: right; margin-top: 278px; } </style> </head> <body> <div id="main"> <div id="left">Лево-вверх</div> <div id="right">Право-низ</div> </div> </body> </html>

    Since in a floating model, floating blocks are “retrieved” from the normal flow, it is better to set the fixed height of the parent block for correct operation. Well, in order to “press” the right block to the bottom - we increase the top margin by the required number of pixels (including, for this, it is necessary to know the height of the parent block). It is worth noting : for normal operation in IE browsers, the presence of a so-called "cleansing" element is necessary. for it you must specify the property clear: both . For this browser, his own way understands this model.

    Here, it seems, and everything that I wanted to write! I hope I managed to help you and am grateful for the voices))))

    • I'm still sitting on the phone and can't answer in more detail, but you can try to set the fixed sizes of the parent block, instead of absolute positioning, move the lower right block by the fields. - LeD4eG
    • one more question: is it really justified to use the inline-block if there is no need for it. div and so is block and it is rarely necessary to add the behavior of the line element to it. - LeD4eG
    • inline-block just for the sample did. So of course it is not necessary. I actually already tried everything, nothing happens. I set float:left internal blocks - that's all, the width of the parent stretches over the child elements. But now I can not press the right block to the bottom. Well, as if all this looks good only in normal browsers. In IE, the child blocks are under each other. - DemoS
    • set the float: right to the right, and press the top field to the bottom (you need to know the height of the parent unit). clear: both - LeD4eG
    • I think that this advice is hardly needed, but the indication of a correct doctype is very important and helps to solve many problems - LeD4eG