How can I force a < p > or < h2 > to not flow?

Question

I'm not sure if the title uses accurate terminology; HTML is not my strong point. I'm trying to create a WordPress page and avoid using a table to accomplish what I want. I have several sections, each with an associated image. The text is flowing around the right-aligned image. I want each "section" to start on it's own line, or to NOT flow around the image from the previous section. If I were doing this with a table I would have a single column with a row for each "section" I wanted. Like I said, I don't want to use a table.

A picture is worth 1k words, so here we go. This is what I want:

and this is what I do not want (but what I'm getting just using < p > and < h2 > tags):

I'd like to know if there is a technique that will allow me to force the "Section 2" tag to start below the image for section 1? I added the green dashed line to illustrate where I would like to have the new section start.

Answer 1

What is the issue, the issue might be because, you are having all of the content wrapped in one div, and you are just writing it all in that one div like this:

<div>
  <div class="content_one">
    <span style="float: left;">Some Text</span>
    <img style="float: right" src="~/folder/file.png" alt="photo" />
    // and the second one starts just under that!
    <span style="float: left;">Some Text</span>
    <img style="float: right" src="~/folder/file2.png" alt="photo" />
  </div>
</div>

This will cause whole of the body to be alike, and there will be almost no barrier to control the style of the elements. If only you start it like this, it would create a distance! Also to make them fix inside a div, using clearfix is also a solution. But margins would be good if you try to get the divs seperately. Suppose:

Solution:

<div>
  <div class="content_one">
   <div class="each_content">
    <span style="float: left;">Some Text</span>
    <img style="float: right" src="~/folder/file.png" alt="photo" />
   </div>
    // and the second one starts just under that!
   <div class="each_content">
    <span style="float: left;">Some Text</span>
    <img style="float: right" src="~/folder/file2.png" alt="photo" />
   </div>
  </div>
</div>

Now, for this you would try to set margin:

.each_content {
 margin: 5px;
}

It will set a margin, to the divs for 5px. You can also try to use a border, to make sure and also it would be helpfull for you to check where the divs start and where they end.

.each_content {
 margin: 5px;
 border: 4px dashed green;
}

I hope it helps you out.

Answer 2

Create a wrapper element, float your p as well as img element to the left like

Demo

.wrap {
    width: 800px;
}

.wrap p {
    float: left;
    width: 500px;
}

.wrap img {
    float: left;
    width: 200px;
    border: 1px solid #f00;
}

Now your .wrap element contains floating child elements so you need to clear them, so either use overflow: hidden; on the parent element which is .wrap here, else use the snippet below to self clear parent

.clear:after {
    clear: both;
    display: table;
    content: "";
}

Why Clear Floats?

In this example am using background-color for .wrap but I don't see any color there, it's simply because the container element has no idea about the dimensions of floated elements, inorder to fix that, we clear the floats like this

---

You can refer this or this answer of mine which is related to the topic.

Answer 3

After trying the various suggestions presented here I'm unable to use any of them because wordpress strips out HTML tags like

so creating a container isn't supported.

I'm using tables. Ah, the evolved web...

Answer 4

Use a clearfix class on each new section.

From Gallagher's post:

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}