html – Content not moving around wrapper div-ThrowExceptions

Exception or error:

I’m trying to structure a page such that there’s a horizontal navigation bar at the top that all the other content on the page starts under (the navigation bar is fixed at the top, but the content isn’t necessarily), and a side bar that all content should start to the right of (which is fixed at the left).

Here’s a link to the jsfiddle, showing what I’ve tried: https://jsfiddle.net/o5p8yuvx/5/.

This doesn’t work as intended however. The content starts under topbar but not to the right of sidebar (I’ve commented out sidebar to show that it sits under topbar; taking it out of the comment block will illustrate that it does not sit to the right of sidebar). I want arbitrary text outside both wrappers to sit in the empty part of the page that is not occupied by either bar (the big white space under topbar and to the right of sidebar), but currently it just sits underneath topbar. Since they’re both wrappers, why is it only sitting under topbar, not sitting under topbar and sitting right of sidebar?

This is just an example however; other divs with content in them cause the same issue. How do I make all further content sit outside the bars, just like sidebar sits under topbar?

How to solve:

It would be best to create a new <div> specifically for the content:

<div class="content">
  arbitrary text
</div>

Then, you can position the <div>, so that it fills the remaining space:

.content {
  margin: 0 0 0 300px;
}
body {
  margin: 0;
}

.topwrapper {
  height: 60px;
}

.sidewrapper {
  width: 300px;
}

.topbar {
  background-color: grey;
  position: fixed;
  width: 100%;
  height: 60px;
  margin: 0;
}

.topbar ul {
  list-style-type: none;
}

.topbar li {
  color: blue;
}

.topbar a:hover {
  background-color: black;
}

.sidebar {
  background-color: black;
  position: fixed;
  width: 300px;
  height: 100%;
  margin: 0;
}

.sidebar ul {
  list-style-type: none;
}

.sidebar li {
  color: blue;
}

.sidebar a:hover {
  background-color: white;
}

.content {
  margin: 0 0 0 300px;
}
<!DOCTYPE HTML>
<html>

<head>
  <title>Webpage</title>
</head>

<body>
  <div class="topwrapper">
    <div class="topbar">
      <ul>
        <li><a style="float: left">Link 1</a></li>
        <li><a style="float: left">Link 2</a></li>
        <li>
          <p style="float: right">Welcome</p>
        </li>
      </ul>
    </div>
  </div>
  <div class="sidewrapper">
    <div class="sidebar">
      <ul>
        <li><a>Link 3</a></li>
        <li><a>Link 4</a></li>
        <li>
          <p>Welcome</p>
        </li>
      </ul>
    </div>
  </div>
  <div class="content">
    arbitrary text
  </div>
</body>

</html>

I have also provided a jsfiddle.


If you want your code to be semantically correct, you can use <main> instead of <div class="content">, then change your css to…

main {
  margin: 0 0 0 300px;
}
body {
  margin: 0;
}

.topwrapper {
  height: 60px;
}

.sidewrapper {
  width: 300px;
}

.topbar {
  background-color: grey;
  position: fixed;
  width: 100%;
  height: 60px;
  margin: 0;
}

.topbar ul {
  list-style-type: none;
}

.topbar li {
  color: blue;
}

.topbar a:hover {
  background-color: black;
}

.sidebar {
  background-color: black;
  position: fixed;
  width: 300px;
  height: 100%;
  margin: 0;
}

.sidebar ul {
  list-style-type: none;
}

.sidebar li {
  color: blue;
}

.sidebar a:hover {
  background-color: white;
}

main {
  margin: 0 0 0 300px;
}
<!DOCTYPE HTML>
<html>

<head>
  <title>Webpage</title>
</head>

<body>
  <div class="topwrapper">
    <div class="topbar">
      <ul>
        <li><a style="float: left">Link 1</a></li>
        <li><a style="float: left">Link 2</a></li>
        <li>
          <p style="float: right">Welcome</p>
        </li>
      </ul>
    </div>
  </div>
  <div class="sidewrapper">
    <div class="sidebar">
      <ul>
        <li><a>Link 3</a></li>
        <li><a>Link 4</a></li>
        <li>
          <p>Welcome</p>
        </li>
      </ul>
    </div>
  </div>
  <main>
    arbitrary text
  </main>
</body>

</html>

###

Since you are using 2 fixed properties, you will need to declare how far from the top to set the sidebar. You can fix this with 1 line in your css to say how far from the top of the parent container you want your div to be:

.sidebar {
  ...
  top: 60px;
}

I used 60px because that is the size of your topbar. If the top bar changes, you can adjust the sidebar location accordingly. Here’s an updated fiddle

The browser defaults to top: auto so that the browser dictates where these items should be, even if it they are wrapped like you have it.

If position: absolute; or position: fixed; – the top property sets the top edge of an element to a unit above/below the top edge of its nearest positioned ancestor.

Because of this, the css starts looking above to the next “positioned ancestor” and uses this as a reference of where the top should be

Top references

Leave a Reply

Your email address will not be published. Required fields are marked *