Trouble understanding the flow of the HTML/CSS

HTML-CSS
1

The code starts by making a vertical left menu bar with the help of a <ul> and {display: block;} So 25% of the first width of the screen is for this menu bar. Then the remaining 75% of the width is for the articles that come from being clicked on the first 25% width in the menu bar.

This is the code:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {
  background-color: #04AA6D;
  color: white;
}

li a:hover:not(.active) {
  background-color: #555;
  color: white;
}
</style>
</head>
<body>

<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:25%;padding:1px 16px;height:1000px;">
  <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>

</body>
</html>

What I don’t understand is when the author states that “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.”

How does a margin-left: 25%; in the

statement make the last 75% of the width of the page its own element? Shouldn’t there be a float: right; to be used to ensure the right side of the page’s integrity? Is it kinda ghetto to just say the margin-left: 25%; without making it a proper container?

2

Not really. Because you have set a position of fixed for the ul. The position fixed will take out the element from the document flow. So the div will act like there is no ul. You can see that by removing the margin of div. so when you add margin itt will be pushed to the right

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.