All geek questions in one place

How to place two HTML elements with content size side by side?

I need to create the following layout for a website with all the elements whose size depends on their content. I cannot set the width of any element - possibly the outermost container (0), if there is no other way.

The outermost container (0) is defined by other parts of the page layout. It contains several elements (1) with the same structure. Container (1) contains a small amount (2) - in fact it is just a number; think of it as a chapter number. To the right of this number is a container (3) with actual contents consisting of several parts (3) - (6). Not all content items (4) - (6) are always present; the current content items are moved to the top of the container (3), so that the first real content item is correct for the number (2). Content items (4) to (6) may contain long texts that are wrapped around.

Finally, this whole structure is nested three times - container (6) has the same structure as container (1). In the deepest container, the nesting level (3) contains, perhaps, a very wide table, which should be horizontally scrollable.

 ___________________________________
|0 _______________________________  |
| |1 _____   ___________________  | |
| | |2    | |3 _______________  | | |
| | |_____| | |4              | | | |
| |         | |_______________| | | |
| |         |  _______________  | | |
| |         | |5              | | | |
| |         | |_______________| | | |
| |         |  _______________  | | |
| |         | |6              | | | |
| |         | |               | | | |
| |         | |               | | | |
| |         | |               | | | |
| |         | |_______________| | | |
| |         |___________________| | |
| |_______________________________| |
|                 .                 |
|                 .                 |
|                 .                 |
|  _______________________________  |
| |1 _____   ___________________  | |
| | |2    | |3 _______________  | | |
| | |_____| | |4              | | | |
| |         | |_______________| | | |
| |         |  _______________  | | |
| |         | |5              | | | |
| |         | |_______________| | | |
| |         |  _______________  | | |
| |         | |6              | | | |
| |         | |               | | | |
| |         | |               | | | |
| |         | |               | | | |
| |         | |_______________| | | |
| |         |___________________| | |
| |_______________________________| |
|___________________________________|

So far i tried

  • layout using DIV but could not position (2) and (3) side by side
  • layout using DIV and floating left (2) and (3), but either the content (3) floats around (2) or (3) moves below (2) if (3) becomes wide
  • layout using DIV and floating left (2) and floating right (3), but then the gap between (2) and (3) can become arbitrarily wide if the content of (3) is narrow
  • - (2) (3) - (0). .
  • , DIV , , .
  • , CSS 2.1 12.4.1, (3). , , ( ).

.

1 Section Header

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur risus
  tortor, egestas id laoreet sit amet, sollicitudin nec ligula. Aliquam vitae
  justo lacus, non sagittis diam. Vestibulum ante ipsum primis in faucibus.

  1.1 Question Header

      Orci luctus et ultrices posuere cubilia Curae; Praesent eu nisi vitae
      arcu cursus lobortis vitae vitae dui. Duis imperdiet varius molestie.
      Donec ut fermentum ligula.

      1.1.1 Nunc dictum, est non vestibulum adipiscing, lacus felis commodo
            orci, in commodo nibh ante ut dolor. Quisque posuere, lacus non
            rutrum sollicitudin, lectus sem commodo tellus, at hendrerit lacus
            neque mattis risus.
             ________________________________________________________________
            |           |           |           |           |           |    |
            | Header    | Header    | Header    | Header    | Header    | Hea|
            |___________|___________|___________|___________|___________|____|                
            |           |           |           |           |           |    |
            |           |           |           |           |           |    |
            |___________|___________|___________|___________|___________|____|
            |           |           |           |           |           |    |
            |           |           |           |           |           |    |
            |___________|___________|___________|___________|___________|____|
               ____________________________________________________________
            |<|____________________________________________________________|>|

      1.1.2 Nunc dictum, est non vestibulum adipiscing, lacus felis commodo
            orci, in commodo nibh ante ut dolor. Quisque posuere, lacus non
            rutrum sollicitudin, lectus sem commodo tellus, at hendrerit lacus
            neque mattis risus.

2 Section Header

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur risus
  tortor, egestas id laoreet sit amet, sollicitudin nec ligula. Aliquam vitae
  justo lacus, non sagittis diam. Vestibulum ante ipsum primis in faucibus.

  2.1 Question Header

      Orci luctus et ultrices posuere cubilia Curae; Praesent eu nisi vitae
      arcu cursus lobortis vitae vitae dui. Duis imperdiet varius molestie.
      Donec ut fermentum ligula.

, .

1 Section Caption
  1.1 Question Caption
10 Section Caption
   10.1 Question Caption

. , .

1  Section Caption
   1.1  Question Caption
10 Section Caption
   10.1 Question Caption

, , , , - .

 1 Section Caption
    1.1 Question Caption
10 Section Caption
   10.1 Question Caption

, , (2) (3) . ? , DIV DIV, .

+3
2

?

CSS

div {
    border: #000 solid 1px;
    padding: 2px;
    min-height: 20px;
    min-width: 12px;
    position: relative;
}

HTML

<div style="width:300px;">
    <div>
        <div style="position:absolute;"></div>
        <div style="margin-left:20px;">
            <div></div>
            <div></div>
            <div>
                <div style="position:absolute;"></div>
                <div style="margin-left:20px;">
                    <div></div>
                    <div></div>
                    <div>
                        <div style="position:absolute;"></div>
                        <div style="margin-left:20px;">
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

, : http://jsfiddle.net/nemophrost/Zrabg/

+1

1 - . HTML Strict .

2 , reset, div , .

3 , Divs . , , , - doctype. . , , 3 2, .

0

Source: https://habr.com/ru/post/1776519/

More articles:


All Articles