Floats with writing

HTML & CSS
,
1

Hi I was just wondering if there was a way for writing to cover above not only below a float div.

Here is my https://jsfiddle.net/dp08pn6j/2/
Is there a way of getting the writing to go above the float not just below?

2

Any content within an element before the float in the document will appear above the float.
Typically content may be divided into paragraphs, so you can have some paragraphs above the float, then some more after which will wrap.

<div class="content">
   <p>Some content above the float.</p>
   <div class="float">Something floated.</div>
   <p>Some content after the float, which will wrap to the side and below.</p>
</div>

I think there are some tricks to force a float further down, but that is a bit more advanced.

1 Like
3

One can use a “sandbag”…

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>sandbag</title>
    <style type="text/css">

.marginBlock {
    border-color:#000;
    border-style:dotted;
    border-width:1px;
    font-weight:normal;
    padding:1em;
}

.containingBlock {
    background-color:#d0d0d0;
    border-color:#000000;
    border-style:solid;
    border-width:4px;
    padding:1em;
}

.contentBlock {
    background-color:#f0f0f0;
    font-size:12pt;
}

.right {
    float:right;
    clear:right;
    width:40%;
/*    margin-top:50px; */
}
.sandbag {
    float:right;
    width:1px;
    height:50px;
}
    </style>
</head>
<body>

<div class="marginBlock">
  <div class="containingBlock">
    <div class="contentBlock">
      <div class="sandbag"></div>
      <div class="right">
        <div class="containingBlock">
          <div class="contentBlock">
          content content content content
          </div>
        </div>
      </div>
      content content content content content content content content
         content content content content content content content content
            content content content content content content content content
            
      content content content content content content content content
      content content content content content content content content
      content content content content content content content content
      content content content content content content content content
         content content content content content content content content   content content content content content content content content   content content content content content content content content   content content content content content content content content
      content content content content content content content content
      content content content content
    </div>
  </div>
</div>

</body>
</html>

Hmmm. The width on the sandbag seems to be unnecessary in FF and Chrome.

2 Likes
4

Ron’s example is the way I would have approached it using the sandbag method.

For interests sake it is possible to do this automatically in ie11 and ie Edge using exclusions.

It’s not supported by other browsers yet so the demo is only for interests sake.

Yes because you have a height the width seems unnecessary.

1 Like
5

I seem to recall you doing something where you used a pseudo element for a sandbag so you didn’t need an empty div, is that right?

6

except that there are two .contentBlocks, this would do it:

.contentBlock::before {
    content:"";
    float:right;
    height:50px;
    outline:1px solid magenta;  /* TEST Outline.  To Be Deleted */
}
1 Like
7

That’s it. Not as complex as I seemed to recall, though it was maybe a more complex example page I was looking at.

I suppose you would make a .sandbag class like that to apply to any element you want to sink a float in.

.sandbag:before {
    content:"";
    float:right;
    height:50px;
    outline:1px solid magenta;  /* TEST Outline.  To Be Deleted */
}

<div class="contentBlock sandbag">
    <div class="right">
1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.