Overlapping of div element in HTML5

Question

I have made 3 div in following codes. 1st one has navigation element, 2 other has section element.

If you run the above code you will see border of nav and both sections. My doubt is that the border of 1st section left element should be to the right of navigation bar border. But since it is not there(can be seen by running the code), this implies div "a" and "b" are overlapping. Am I thinking in the right way?And if I am right, why CSS is designed this way of overlapping div.

In fact this contradicts the reason of introducing div in CSS.

nav {
  float: left;
  width: 200px;
  border: 1px solid black;
}
section {
  border: 3px solid red;
}

<div class="a">
  <nav>
    <span>nav</span>
    <ul>
      <li><a target="_blank" href="/default.asp">Home</a>
      </li>
      <li><a target="_blank" href="default.asp">CSS</a>
      </li>
      <li><a target="_blank" href="/html/default.asp">HTML</a>
      </li>
      <li><a target="_blank" href="/js/default.asp">JavaScript</a>
      </li>
    </ul>
  </nav>
</div>
<div class="b">
  <section>
    <span>section</span>
    <p>Notice we have put a clearfix on the div container. It is not needed in this example, but it would be if the nav element was longer than the non-floated section content.</p>
  </section>
</div>
<div class="c">
  <section>
    <span>section</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce
      luctus vestibulum augue ut aliquet.</p>
  </section>
</div>

Have you used your browser's Inspect Element tools to actually see what's overlapping what? — deceze, Aug 17 '16 at 09:58
See: http://stackoverflow.com/questions/2062258/floating-stuff-within-a-div-floats-outside-of-div-why — Wake, Aug 17 '16 at 10:08

kukkuz · Accepted Answer · 2016-08-17T10:11:48.590

2

Its not actually overlapping. As your red border is 3px wide it seems so. See what happens when I made it 1px.

EDIT

I cleared the float on nav by:

  <div style="clear:both"></div>

and now it doesn't overlap. This is expected behaviour while you float elements.

<!DOCTYPE html>
<html>
<head>
<style>


nav {
    float: left;
    width: 200px;
border:1px solid black;
}

section {
    border: 1px solid red;
}
</style>
</head>
<body>


<div class="a">
<nav>
  <span>nav</span>
    <ul>
      <li><a target="_blank" href="/default.asp">Home</a></li>
      <li><a target="_blank" href="default.asp">CSS</a></li>
      <li><a target="_blank" href="/html/default.asp">HTML</a></li>
      <li><a target="_blank" href="/js/default.asp">JavaScript</a></li>
    </ul>
  </nav>
  <div style="clear:both"></div>
</div>
<div class="b">  
<section>
    <span>section</span>
    <p>Notice we have put a clearfix on the div container. It is not needed in this example, but it would be if the nav element was longer than the non-floated section content.</p>
  </section>
</div>

edited Aug 17 '16 at 10:11

answered Aug 17 '16 at 09:59

kukkuz

41,512
6
59
95

If you remove the border of nav element, you will find it overlapping – Dhrub Kumar Aug 17 '16 at 10:05
that is because div `a` does not have a height and `nav` inside `a` is floated – kukkuz Aug 17 '16 at 10:08
@DhrubKumar I cleared the float and now it doesn't overlap. This is expected behaviour while you float elements. – kukkuz Aug 17 '16 at 10:12
@DhrubKumar: please let me know your feedback on this if it is working for you? – kukkuz Aug 17 '16 at 17:32
.Yeah.My doubt got clarified – Dhrub Kumar Aug 23 '16 at 02:21

Syam Pillai · Answer 2 · 2016-08-17T10:13:39.743

The porblem is with float If you dont want to overlap them. Try flex-box

Here is a demo

   nav {
/* float: left; */
  height: 100%;
  width: 200px;
  border:1px solid black;
   }
   .container{
  display: flex;
  height: 100%;
   }

   section {
  border: 3px solid red;
   }
   nav ul{
 margin:0;
   }

<div class="container">
<div class="a">
<nav>
  <span>nav</span>
    <ul>
      <li><a target="_blank" href="/default.asp">Home</a></li>
      <li><a target="_blank" href="default.asp">CSS</a></li>
      <li><a target="_blank" href="/html/default.asp">HTML</a></li>
      <li><a target="_blank" href="/js/default.asp">JavaScript</a></li>
    </ul>
  </nav>
</div>
<div class="b">  
<section>
    <span>section</span>
    <p>Notice we have put a clearfix on the div container. It is not needed in this example, but it would be if the nav element was longer than the non-floated section content.</p>
  </section>
</div>
</div>
  <div class= "c">
<section>
    <span>section</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.</p>
  </section>
</div>

It's overlapping because your `.a` class is **floating over** div `.b` You have given float left there — Syam Pillai, Aug 17 '16 at 10:12

score 0 · Answer 3 · answered Aug 17 '16 at 10:07

0

Your .a block has no height. Add a clearfix to it

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

<div class="a clearfix">
    //rest of code

answered Aug 17 '16 at 10:07

AlexG

5,649
6
26
43

score 0 · Answer 4 · answered Aug 17 '16 at 10:16

When the div element is set to float and the width is set, the div height will ajust to the content inside the div. And that is why it overflows the next div bellow. It is using div "b" to set the height of first row.

Is this what you are after:

https://jsfiddle.net/53q6e9hz/

nav {
  float: left;
  width: 200px;
  border: 1px solid black;
}
section {
  border: 3px solid red;
  display:block;
}
.b{
 width:calc(100% - 202px);
 float: left;
}
.row1{
  display:inline-block;
}

Overlapping of div element in HTML5

4 Answers4