0

Why margin property work on both HTML elements with float property when only applied on second element?

In DIV element there are two margin properties. In Margin-Left property case it work prefect, it did what I want. But, In case of Margin-Top property it applied on both elements ul and div. I only applied it on div element.

* {
  margin: 0%;
  padding: 0%;
  box-sizing: border-box;
}

ul {
  float: left;
  height: 100%;
  background-color: antiquewhite;
  list-style: none;
  overflow: auto;
  width: 15%;
  position: fixed;
}

ul li a {
  text-decoration: none;
  display: block;
  padding: 15px;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

ul li a:hover {
  background-color: white;
}
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
<div style="margin-left: 17%; margin-top: 5px; padding: 3px 1px; height: 100px; width: 950px; overflow: auto; border: 1px solid black;">
  <h2>Fixed Full-height Side Nav</h2>
  <h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
  <p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
  <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
</div>
j08691
  • 204,283
  • 31
  • 260
  • 272
Sarab Nadeem
  • 3
  • 1

1 Answers1

0

There are a number of different comments on how to improve this, but first set the

position: fixed;
top: 0;
left:0;

Properties on you ul.

I would suggest using classes instead of hardcoding css. Also, use a framework like bootstrap. It'll allow you to go a lot faster and see some more best practices in action. Frameworks are just tools and not applicable for every situation, however, they do allow you to learn, and I think that that would be valuable here.

* {
  margin: 0%;
  padding: 0%;
  box-sizing: border-box;
}

ul {
  float: left;
  height: 100%;
  background-color: antiquewhite;
  list-style: none;
  overflow: auto;
  width: 15%;
  position: fixed;
  top: 0;
  left: 0;
}

ul li a {
  text-decoration: none;
  display: block;
  padding: 15px;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

ul li a:hover {
  background-color: white;
}
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
<div style="margin-left: 17%; margin-top: 5px; padding: 3px 1px; height: 100px; width: 950px; overflow: auto; border: 1px solid black;">
  <h2>Fixed Full-height Side Nav</h2>
  <h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
  <p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
  <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
</div>
dangarfield
  • 2,210
  • 1
  • 13
  • 18