Home/ Questions/Q 7876495
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T03:10:32+00:00

Sample here: http://jsfiddle.net/YUhgb/ HTML <html> <body> <div class=left></div> <div class=right> <div class=container> <div class=item></div>

  • 0

Sample here: http://jsfiddle.net/YUhgb/

HTML

<html>
    <body>
        <div class="left"></div>
        <div class="right">
            <div class="container">
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
            </div>
            <p>
                After Container
            </p>
        </div>
    </body>
</html>

CSS

.left{
    float: left;
    width: 150px;
    height: 700px;
    background-color:red;
}
.right{
    margin-left: 160px;
    background-color:blue;
}
.container:after{
    content: "";
    height: 0;
    clear: both;
    display: block;
}
.item{
    float:left;
    width: 21%;
    margin-right: 1%;
    margin-bottom: 10px;
    height: 200px;
    background-color:green;
}

The problem is, if the left column is too long, the content below the floated content drops down below the left side. In my example, I want the text After Container to be displayed directly below the green boxes.

How can I apply the clear:left so that it only affects the right column?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can solve this problem by adding display: table and width: 100%; to your block with a class of container. See the working example here: http://jsfiddle.net/skip405/YUhgb/15/

    • 0