SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

    Code:
    <!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>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    I don't understand why you need to float the p, but anyhow, one thing you could add to your styles is this:

    Code:
    p + div {clear: left;}

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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 :
    Code:
        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?




    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

  4. #4
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •