Home/ Questions/Q 948417
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T23:14:33+00:00

Say I have the following HTML: <head> <style> #container { border: 1px red solid;

  • 0

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 renders as: floaty divs

What’s the proper CSS way to have the container (red-bordered box) completely surround the floaty green-bordered boxes?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Add an overflow: auto to the container, like this:

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

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

    • 0