CODEWITHSUNDEEP
htmlcsscss-float
Dhrub Kumar
Dhrub Kumar

Reputation: 105

Overlapping of div element in HTML5

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>

Upvotes: 4

Views: 1081

Answers (4)

Daniel Forbes
Daniel Forbes

Reputation: 624

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;
}

Upvotes: 0

Syam Pillai
Syam Pillai

Reputation: 5217

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>

Upvotes: 0

kukkuz
kukkuz

Reputation: 42352

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>

Upvotes: 2

AlexG
AlexG

Reputation: 5919

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

Upvotes: 0

Related Questions