Hello.

Tell me, I do not fully understand how the div layout works. When you make up a page, often one div happens inside another diva. And I just can not figure out how to make one diva block which, for example, I create to create a background for an internal block with text, stretch like an internal div. But it turns out that these divas are like sheets of paper on the table - one easily goes beyond the other. How can I make the size of an external diva increase automatically with an increase in the internal one (so that they are mutually dependent blocks, so that the internal one cannot go beyond the external one).

    6 answers 6

    css:

    div#big_div{ padding: 10px 20px 30px 40px; border: 1px solid #f00; margin: 200px; } div#small_div{ width: 40px; height: 60px; border: 1px solid #00f; }

    html:

     <div id="big_div"> <div id="small_div"> </div> </div>

    Try this.

    • No, this is not the case, it is proposed to set a fixed width and height with padings, but this is not suitable for the template, since the content texts are different, fit on one page, and not fit on the other. I need a universal team that would force the external div to expand along with the internal one. For example, I have an external div that is a container for a side bar and a diva with content. I ask this external diva the color of the background and the side bar and content are a different color;
    • But the problem is that if I start to fix the height, then when I add more content, it climbs on either the footer or goes under the footer in general. And if the content is not enough, then everything rises up which is not beautiful. - Krezvaa

    This means that one has float:left , and the other does not.

    You also need to not set a fixed width if you want the block to be rubber.

    • to cope with float: left you need to specify without the width of the external diva set overflow: hidden - knes

    If nesting is normal, then without specifying the height-width everything should stretch normally. Maybe it's in the doctype, if you don’t specify or you specify the wrong one, I can do strange things. I remember moving from tabular typesetting to divas, I hung the tablets without a doctype and everything was ok, but it didn't work out with divas anymore.

    If indeed the doctype is not specified, try to prescribe the document first:

     <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

      In order for the external block to stretch along with the internal one, instead of going beyond the external, it is not necessary to specify the size of the external one.

        <div id="main" style="min-height: 100%; width: 1000px;"> <div id="content" style="width: 700px;">[статья]</div> <div id="menu" style="width: 300px;"><ul>[...]</ul></div> </div>

      The height will be as much as necessary for the normal display of all nested blocks.

        Use this:

         <div style="float:left; margin:0; padding:0 0 10px 0; min-height:auto; border:1px solid red;"> <div style="float:left; margin:0 0 0 0; padding:0; min-height:100px; border:1px solid green;"> </div> </div>

          You can use jquery =) There you set the relative block sizes.