Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>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:</p> <pre><code>&lt;div&gt; &lt;div class="content_one"&gt; &lt;span style="float: left;"&gt;Some Text&lt;/span&gt; &lt;img style="float: right" src="~/folder/file.png" alt="photo" /&gt; // and the second one starts just under that! &lt;span style="float: left;"&gt;Some Text&lt;/span&gt; &lt;img style="float: right" src="~/folder/file2.png" alt="photo" /&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>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: </p> <p><strong>Solution:</strong></p> <pre><code>&lt;div&gt; &lt;div class="content_one"&gt; &lt;div class="each_content"&gt; &lt;span style="float: left;"&gt;Some Text&lt;/span&gt; &lt;img style="float: right" src="~/folder/file.png" alt="photo" /&gt; &lt;/div&gt; // and the second one starts just under that! &lt;div class="each_content"&gt; &lt;span style="float: left;"&gt;Some Text&lt;/span&gt; &lt;img style="float: right" src="~/folder/file2.png" alt="photo" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Now, for this you would try to set margin:</p> <pre><code>.each_content { margin: 5px; } </code></pre> <p>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.</p> <pre><code>.each_content { margin: 5px; border: 4px dashed green; } </code></pre> <p>I hope it helps you out. </p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload