Position float below a float

Hi all

I have a demo here - http://www.ttmt.org.uk/float.html

It’s a <p> tag with text and three div’s below.

The <p> tag and the div’s are all floated left.

I would like the green div’s to be below the red <p> tag like

http://www.ttmt.org.uk/float_2.html

In this example I have removed the float from the <p> tag but I need to float it.

Is there a way to float all the elements and have the green div’s below the red <p> tag.

Do I need to add extra div’s around the <p> tag and div’s


<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">

  <style type="text/css">
    *{
      margin:0;
      padding:0;
    }
    html,body{
      background:#eee;
      height:100%;
      font-family:Helvetica, sans-serif;
    }
    .wrap{
      min-height:100%;
      max-width:800px;
      background:#fff;
      margin:0 auto;
    }
    p{
      background:red;
      color:#fff;
      width:50%;
      float:left;
      clear:both;
      margin:0 0 20px 0;
      padding:10px;
    }
    .box{
      width:100px;
      height:100px;
      background:green;
      margin:10px;
      float:left;
    }
  </style>

  <title>Title of the document</title>
  </head>

<body>
  <div class="wrap">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</body>

</html>

I don’t understand why you need to float the p, but anyhow, one thing you could add to your styles is this:

p + div {clear: left;}

as Ralph alluded to , the BEST solution, to the sample shown above, is NOT to float the P, you don’t even need clear:both ( unless you have other floats previous in the code and within the same container.

so all you need to change is :

    p{
      background:red;
      color:#fff;
      width:50%;
       margin:0 0 20px 0;
      padding:10px;
    }

Floats NATURALLY come BELOW any non floated element that precedes the in the mark up.

am assuming of course you want the DIVs to be side by side, but below the P. If you want them to go bellow each other … um then why are you even floating divs too?
:wink:

Do I need to add extra div’s around the <p> tag and div’s

well’ here is the rub, CSS and its HTML are intrinsically tied, the suggestions above should solve your question, but it may or may not be applicable to your whole layout. CSS doesn’t always allow a divide an conquer approach.

in any case , I hope that helped

The example used is a simplified version of the actual more complex code.

In the actual code I need to float the <p> but I might try and find a way not to.