Why my HTML headers of a new paragraph sticks to the end of the previous paragraph?

Question

I'm using Python to make an HTML. Basically, my code loads 5 images into a row if a search has results and returns 2 strings if there's no result depending on what the error might be. If I do get 5 images, I want them to be evenly aligned in a row. The following is one HTML I got.

<!DOCTYPE html>
<html>
  <head>
    <title>DC Menu</title>
    <style>        * {
            box-sizing: border-box;
        }

        .column {
            float: left;
            width: 20%;
            padding: 5px;
        }
        /* Clearfix (clear floats) */

        .row::after {
            content: &quot;&quot;;
            clear: both;
            display: table;
        }</style>
  </head>
  <body>
    <h1>Today's DC Menu</h1>
    <p>
      <h3>&gt;&gt;&gt; Today's Breakfast has: apple</h3>
    </p>
    <p>
      <a href="https://www.google.co.in/search?q=apple&amp;source=lnms&amp;tbm=isch">apple</a>
    </p>
    <div class="row">
      <div class="column">
        <img alt="('https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201606271147', 'png')" src="https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201606271147" style="width:100%">
      </div>
      <div class="column">
        <img alt="('https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201606271147', 'png')" src="https://as-images.apple.com/is/image/AppleInc/aos/published/images/o/g/og/default/og-default?wid=1200&amp;hei=630&amp;fmt=jpeg&amp;qlt=95&amp;op_usm=0.5,0.5&amp;.v=1525370171638" style="width:100%">
      </div>
      <div class="column">
        <img alt="('https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201606271147', 'png')" src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201809210816" style="width:100%">
      </div>
      <div class="column">
        <img alt="('https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201606271147', 'png')" src="https://cdn.vox-cdn.com/thumbor/DqZ_YBYBAVZtBF1PFi2fj4DOszM=/0x0:1280x800/1200x800/filters:focal(538x298:742x502)/cdn.vox-cdn.com/uploads/chorus_image/image/61897327/apple8.0.png" style="width:100%">
      </div>
      <div class="column">
        <img alt="('https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201606271147', 'png')" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/250px-Apple_logo_black.svg.png" style="width:100%">
      </div>
    </div>
    <p>
      <h3>&gt;&gt;&gt; Today's Lunch has: xdgbdgtnstnjseth</h3>
    </p>
    <p>
      <a href="https://www.google.co.in/search?q=xdgbdgtnstnjseth&amp;source=lnms&amp;tbm=isch">xdgbdgtnstnjseth</a>
    </p>
    <div class="row">
      <div class="column">
        <img alt="Your search has no return." src="Y" style="width:100%">
      </div>
    </div>
    <p>
      <h3>&gt;&gt;&gt; Today's Dinner has: hateç</h3>
    </p>
    <p>
      <a href="https://www.google.co.in/search?q=hateç&amp;source=lnms&amp;tbm=isch">hateç</a>
    </p>
    <div class="row">
      <div class="column">
        <img alt="The dish name has weird letters that cannot be searched directly." src="T" style="width:100%">
      </div>
    </div>
  </body>
</html>

And I got the webpage looks like this: I'm satisfied with the first several lines. However, for the line of "Today's Dinner..." and the line below it, why they didn't start from a new paragraph but stick to the end of the previous "Your search has no return"? I think my misunderstanding is on the HTML structure and I don't really worry about the Python part once I know what the correct HTML should look like. Thank you!

Try to add a
tag right above the opening of the
tag
– VG98 Jan 01 '19 at 21:09 — VG98, Jan 01 '19 at 21:09

score 0 · Answer 1 · answered Jan 01 '19 at 21:17

HTML wise, your code is OK. You need to fix your css errors. One that will fix your problem would be:

.row::after {
        content: '"'; /* fix this*/
        clear: both;
        display: table;
    }

Since your original declaration of content property was wrong, CSS parser stopped there, and didn't apply clear and display properties. Which would fix your floating columns.

More on quoting with ::before and ::after here

Why my HTML headers of a new paragraph sticks to the end of the previous paragraph?

1 Answers1