How can I clear the overflow for just one line?

Question

I'm having problems clearing some overflow between left and right floats.

My overflow goes down deep into the first parent div and I just want it to clear into the next line on the next parent div. Here is my simplified version of my code:

 <div>
      <div style='float:left; display:block;'>
        <div>
          <div style='background-color:blue'>
            asdfasdfasdfasdfasdfasdf
          </div>
          <div style='background-color:blue'>
            asdfasdfasdfasdfasdfasdf
          </div>
          <div style='background-color:blue'>
            asdfasdfasdfasdfasdfasdf
          </div>
          <div style='background-color:red; clear:right'>
            <div style='width:300px; position:relative; display: block; clear: both'>
              asdfasdfasdfasdffadsafasdfasdfasdfasdfasdfasdfasdfasdfasdf
            </div>
          </div>
          <div style='background-color:blue'>
            asdfasdfasdfasdfasdfasdf
          </div>
          <div style='background-color:blue'>
            asdfasdfasdfasdfasdfasdf
          </div>
        </div>
      </div>
      <div style='float;right;'>
        <div>
          asdfasdfasdf
        </div>
        <div>
          asdfasdfasdf
        </div>
        <div>
          asdfasdfasdf
        </div>
        <div>
          asdfasdfasdf
        </div>
      </div>
    
    </div>

My above example has text overlapping in the same line as the red box. How do I make the overlapping float right text drop down to the next blue box?

Answer 1

To answer your question easily:

your text inside the red box will always be in the red box, because is its container. So...

You put a widht limit, and the content is bigger than the container. This is known as overflow.

You can make the red box grow, or dealing with overflow with CSS overflow property: w3schools.com/cssref/pr_pos_overflow.asp

If you want to keep your width limit on your divs, you can add a blank div to match the overflowing first col div:

<div>
      <div style='float:left; display:block;'>
        <div>
          <div style='background-color:blue'>
            asdfasdfasdfasdfasdfasdf
          </div>
          <div style='background-color:blue'>
            asdfasdfasdfasdfasdfasdf
          </div>
          <div style='background-color:blue'>
            asdfasdfasdfasdfasdfasdf
          </div>
          <div style='background-color:red; clear:right'>
            <div style='width:300px; clear: both'>
              asdfasdfasdfasdffadsafasdfasdfasdfasdfasdfasdfasdfasdfasdf
            </div>
          </div>
          <div style='background-color:blue'>
            asdfasdfasdfasdfasdfasdf
          </div>
          <div style='background-color:blue'>
            asdfasdfasdfasdfasdfasdf
          </div>
        </div>
      </div>
      <div style='float;right;'>
        <div>
          asdfasdfasdf
        </div>
        <div>
          asdfasdfasdf
        </div>
        <div>
          asdfasdfasdf
        </div>
        <div>
        <br>
        </div>
        <div>
          asdfasdfasdf
        </div>
      </div>
    
    </div>