All geek questions in one place

The correct way to contain floating elements using HTML / CSS?

Let's say I have the following HTML:

<head>
    <style>
        #container {
            border: 1px red solid;
        }
        .floaty {
            width: 200px;
            float: left;
            border: 1px green solid;
        }
    </style>
</head>
<body>
<div id='container'>
    Text inside the container
    <div class='floaty'>
    Floaty block 1<br/>
    Floaty block 1<br/>
    Floaty block 1<br/>
    </div>
    <div class='floaty'>
    Floaty block 2<br/>
    Floaty block 2<br/>
    Floaty block 2<br/>
    </div>
    <div class='floaty'>
    Floaty block 3<br/>
    Floaty block 3<br/>
    Floaty block 3<br/>
    </div>
</div>
</body>

This is displayed as: floaty divs

What is the proper use of the CSS container (red frame) to completely surround the floating green frames?

+3
source share
2 answers

Add overflow: autoto the container, for example:

#container {
     border: 1px red solid;
     overflow: auto;
}

You can check the effect here and find a very good description of how it works here .

+13
source

add overflow: autoto container or apply clearfix .

+1
source

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

More articles:


All Articles