Text not shifting within wrapper container

Question

Text not shifting within wrapper container

I am attempting to design a webpage layout with a fixed horizontal navigation bar at the top, where all other content on the page starts underneath. Additionally, I want a fixed sidebar on the left side where all content should align to the right of it.

You can view my attempt at this layout on jsfiddle here: https://jsfiddle.net/o5p8yuvx/5/.

Unfortunately, the current setup is not working as intended. While the content correctly begins under the topbar, it does not align to the right of the sidebar. I've noted in the code that sidebar sits below topbar; uncommenting it will reveal that the content does not position to the right of sidebar. My goal is to have any additional text located outside both wrappers fill the space beneath topbar and to the right of sidebar, instead of just appearing below topbar.

This issue persists with other content-containing divs as well. How can I ensure that all subsequent content appears outside of the bars, similar to how sidebar is positioned beneath topbar?

html css

Answer 1

Answer №1

To optimize the layout, it is recommended to establish a separate <div> element dedicated solely to the content:

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

Subsequently, you can adjust the positioning of this new <div> to occupy 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>

A working example using a jsfiddle link can be found here: jsfiddle.

If aiming for semantic correctness, consider utilizing the <main> tag in place of <div class="content">, with corresponding CSS modifications as follows...

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>

Answer 2

To optimize the layout, it is recommended to establish a separate <div> element dedicated solely to the content:

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

Subsequently, you can adjust the positioning of this new <div> to occupy 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>

A working example using a jsfiddle link can be found here: jsfiddle.

If aiming for semantic correctness, consider utilizing the <main> tag in place of <div class="content">, with corresponding CSS modifications as follows...

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>

Answer 3

Answer №2

When incorporating 2 fixed properties, it is necessary to specify the distance from the top for positioning the sidebar. You can achieve this by adding a single line in your css to indicate how far from the top of the parent container you want the div to appear:

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

The value 60px was chosen based on the height of your topbar. In case the top bar undergoes any changes, you can adjust the position of the sidebar accordingly. Check out the revised fiddle for reference.

By default, the browser sets top: auto, allowing the browser to determine the placement of these elements even if they are nested within other elements as in your case.

For elements with position: absolute; or position: fixed;, the top property positions the top edge of the element at a specified distance above/below the top edge of its nearest positioned ancestor.

As a result, the css code starts tracing back to find the closest "positioned ancestor" and uses it as a point of reference for determining the top position.

Here are more details on using the Top property

Answer 4

When incorporating 2 fixed properties, it is necessary to specify the distance from the top for positioning the sidebar. You can achieve this by adding a single line in your css to indicate how far from the top of the parent container you want the div to appear:

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

The value 60px was chosen based on the height of your topbar. In case the top bar undergoes any changes, you can adjust the position of the sidebar accordingly. Check out the revised fiddle for reference.

By default, the browser sets top: auto, allowing the browser to determine the placement of these elements even if they are nested within other elements as in your case.

For elements with position: absolute; or position: fixed;, the top property positions the top edge of the element at a specified distance above/below the top edge of its nearest positioned ancestor.

As a result, the css code starts tracing back to find the closest "positioned ancestor" and uses it as a point of reference for determining the top position.

Here are more details on using the Top property

Text not shifting within wrapper container

Answer №1

Answer №2

Similar questions

Having trouble with conditional statements in tpl file on Prestashop (PHP, Smarty)?

Ways to update the value in localstorage with the click of a button

Building an expansive navigation menu with react-bootstrap

Utilizing JavaScript to display numerous variables within a text box

Utilizing Node modules like Sentry in HTML template files when served from Golang using the gin-gonic package

What specific style of CSS is utilized in Material UI's `sx` property feature?

Center text within a div container

Updating the iFrame source using jQuery depending on the selection from a dropdown menu

How the top property in absolute positioning is determined by the parent element's width

Issue with X overflow visible at the right edge of the webpage (Vue.js and Tailwind CSS)

Can multiple if statements be executed simultaneously in plain Javascript? If yes, what is the method to do so?

Implement a full-width dropdown menu with Bootstrap 4

After encountering a character with CSS, begin a new line

Delayed suggestions using Typeahead and Bloodhound technology

Moving data from one table to another and making changes or removing it

Why isn't a single click enough to activate an anchor generated with the Sidr jQuery library in Rails?

Issue with URL redirection and reloading in Safari and IE browsers

Is it possible to utilize various return values generated by a regex?

Monitoring changes in SASS files using node-sass through NPM

Inject CSS styles into panelgrid on-the-fly