HTML and CSS: Image floated right overlaps with ul below - WHY

Question

Here is the code, there are solutions available for work around what I am really interested in is WHY does it happen, whats going on behind the scenes?

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Demo CSS3</title>
      <style>
        p
        {
          color: #000000;
          font-size: medium;
          font-family: 'Segoe UI';
        }
        h1
        {
          color: #ff0000;
          font-size: x-large;
          font-family: 'Segoe UI';   
        }
        h2
        {
          color: #0000ff;
          font-size: larger;
          font-family: 'Segoe UI';   
        }

        footer p
        {
          font-size: x-small;
        }
        .entry-content :first-child {color:brown}
        ul :nth-child(odd) {background-color : yellow }
        ul :nth-child(even) {background-color : blue}
        .aside-body p:nth-of-type(odd) {background-color : yellow }
        .aside-body p:nth-of-type(even) {background-color : pink }

        .wholePage{
            font-family: 'Segoe UI', Arial, Helvetica, san-serif;
            font-size: 18px;
            color: #0000ff;
            width: 700px;
            margin: 5 auto;
        }
        .aside{
            float:right;
            width:170px;
            margin-top:50px;

        }
        .mainsection{
            margin:180px;
            background:gray;
        }
        .mainsection img{
            float:right;
            width:150px;
            height:150px;
            margin:5px;

        }



      </style>
    </head>
    <body class="wholePage">
        <aside class="aside">
          <section class="aside-header">
            <h2>About HTML5</h2>
          </section>

          <section class="aside-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Fusce porta lorem rhoncus, rhoncus orci sed, auctor nisl. 
            Etiam rutrum risus tellus, eu interdum tortor porttitor ut. 
            Praesent et nisl tincidunt lorem suscipit laoreet vel non turpis.
            Vivamus hendrerit vel neque at varius. 
            Donec tempus, sapien at fermentum pulvinar, orci mauris tempor dolor, 
            non mattis magna lectus et augue. 
            Vivamus ut diam enim. Fusce nec dui arcu. 
            Duis luctus odio ligula, vitae pharetra nisi cursus ut. 
            Nam id neque pulvinar tortor laoreet laoreet sed at sem.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Fusce porta lorem rhoncus, rhoncus orci sed, auctor nisl. 
            Etiam rutrum risus tellus, eu interdum tortor porttitor ut. 
            Praesent et nisl tincidunt lorem suscipit laoreet vel non turpis.
            Vivamus hendrerit vel neque at varius. 
            Donec tempus, sapien at fermentum pulvinar, orci mauris tempor dolor, 
            non mattis magna lectus et augue. 
            Vivamus ut diam enim. Fusce nec dui arcu. 
            Duis luctus odio ligula, vitae pharetra nisi cursus ut. 
            Nam id neque pulvinar tortor laoreet laoreet sed at sem.</p>
          </section>
        </aside>
        <div class="mainsection">
       <article id="post-5946">
          <section id="post-5946-header">
                  <h1 class="entry-title">8th Pluralsight Course: 
                  HTML5 From Scratch</h1>
                  <div class="entry-meta">
                      <span class="meta-prep">Posted on July 14, 2013</span>
                  <span class="meta-sep">by</span> 
                  <span class="author">Jesse Liberty</span>         
               </div><!-- .entry-meta -->
          </section>
             <section class="entry-content">
               <p>
                  <a href="http://blog.pluralsight.com/2013/07/10/new-course-html5-from-scratch/">
                     HTML5 From Scratch</a>

                  <img alt="html5" title="html5" src="http://jesseliberty.com/wp-content/uploads/2013/07/html5_thumb.jpg" width="134" height="136"/>
                  Very proud to announce my latest Pluralsight Course: 
               </p>
               <p><a href="http://www.html5rocks.com/en/">HTML5f</a> 
                 is the markup language of the web that has taken the world by storm. 
                  In this “from scratch” course, 
                  I demonstrate all you need to know about what’s new in HTML5 to get started 
                 creating world-class web sites
               </p>
               <p>
               asdf
               <a href="http://blog.pluralsight.com/2013/07/10/new-course-html5-from-scratch/">
                     HTML5 From Scratch</a>
               sdf
               </p>
                <p>
                  <a href="http://blog.pluralsight.com/2013/07/10/new-course-html5-from-scratch/">
                     HTML5 From Scratch</a>

                  <img alt="html5" title="html5" src="http://jesseliberty.com/wp-content/uploads/2013/07/html5_thumb.jpg" width="134" height="136"/>
                  Very proud to announce my latest Pluralsight Course: 
               </p>
               <p>here you go!</p>
               <ul>
                    <li>option 1</li>
                    <li>asdfasf</li>
                    <li>sdfasdfa</li>
                    <li>asdfasdf</li>
                    <li>asdfasf</li>
               </ul>
          </section>

        </article>
        </div>
    <footer class="footer">
      <p>Copyright 2013 Jesse Liberty</p>
    </footer>
    </body>
</html>

I have looked at many posts and everyone seems to have their own work arounds but no one explained WHY does this happen and WHAT is the genuine way of doing it?

linc · Answer 1 · 2017-02-25T01:58:06.107

anything to do with positioning has that effect so i wouldn't use float or position for this

-- try use on parent - display:flex;flex-wrap:wrap;width:100%; -- and set the children with specified width eg. width:55%;

what ever you want next to each other the withs must be = 100% or less that 100% so if the container to the left has a width of 40% and the image of 60% the image goes next to the other content not overlay it --

now non of the content overlays anything else

score 0 · Answer 2 · answered Feb 25 '17 at 01:19

0

Try .entry-content p { overflow: hidden; } (i.e. the element that contains the floated element is forced that way to also wrap the floats that are inside it)

answered Feb 25 '17 at 01:19

Johannes

64,305
18
73
130

score 0 · Answer 3 · answered Feb 25 '17 at 01:22

Add a float property (right or left) and 100% width to the UL. See fiddle.

HTML:

     <ul class="floatme">
          <li>option 1</li>
          <li>asdfasf</li>
          <li>sdfasdfa</li>
          <li>asdfasdf</li>
          <li>asdfasf</li>
     </ul>

CSS:

 ul.floatme { float: left;
     width: 100%;
 }

https://jsfiddle.net/mediaguru/8gk7nkyp/

score 0 · Answer 4 · edited May 23 '17 at 12:25

I believe Luke brings the answer to your question in this other Stackoverflow answer to Which is the load, rendering and execution order of elements in a HTML page?.

He put it like this in his answer:

...

Start HTML Parsing

Start downloading external files (JavaScript, CSS, images) as they're encountered in the HTML

Parse external files once they are downloaded (or if they are inline and don't require downloading)

...

if they're images then display them

...

End HTML Parsing

So, the browser first renders the text parts of the page and only afterwards draws the images (draws them on top of the text).

I would definitely recommend checking out Luke's answer, as it is highly more informative and descriptive than mine.

score 0 · Answer 5 · answered Feb 25 '17 at 01:25

This happens because your <img> is floating inside a <p> tag, so <p> tag doesn't consider the image height. You didn't clear the float.

p {overflow: auto}

You can set overflow to auto on <p> to clear the float.

Check the jsfiddle

Check this article https://css-tricks.com/all-about-floats/

HTML and CSS: Image floated right overlaps with ul below - WHY

5 Answers5