The sidebar is not aligning properly on the page

Question

The sidebar is not aligning properly on the page

I'm encountering an issue while designing a basic website - the sidebar is not aligning correctly. Despite my efforts, it keeps appearing below the content instead of on the right side as intended.

* {
  font-family: verdana;
  background-color: lightgray;
}

p {
  font-size: 2vh;
}

.logo {
  padding-left: 3vw;
}

.navbar {
  background-color: #383838;
  width: 100vw;
  height: 7vh;
}

.navbar a {
  font-size: 5vh;
  text-decoration: none;
  background-color: #383838;
  color: white;
  padding-left: 3vw;
  padding-right: 3vw;
  padding-bottom: 0.75vh;
  border-right: 0.2vw solid white;
}

.content {
  width: 70vw;
  height: 80vh;
  background-color: white;
  padding-top: 0.5vh;
  margin-left: 0;
}

.content h1,
.content p {
  background-color: white;
  color: black;
  margin-left: 3vw;
  margin-right: 3vw;
}

.sidebar {
  background-color: orange;
  width: 10vw;
  height: 80vh;
}

<h1 class="logo">Logo</h1>

<div class="navbar">
  <a href="www.google.com">Home</a>
  <a href="www.google.com">Products</a>
  <a href="www.google.com">About me</a>
</div>

<div class="content">
  <h1>Content</h1>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>

<div class="sidebar"></div>

The language being used in the text is German, but that doesn't affect the positioning issue. The ".sidebar" element is meant to be situated on the right side of the ".content" section.

html css layout alignment

Answer 1

Answer №1

By default, the display: block; property on a div will stack them one on top of another unless specified otherwise.

To avoid this, you can create a wrapper div with the display: flex property.

* {
  font-family: verdana;
  background-color: lightgray;
}

p {
  font-size: 2vh;
}

.logo {
  padding-left: 3vw;
}

.navbar {
  background-color: #383838;
  width: 100vw;
  height: 7vh;
}

.navbar a {
  font-size: 5vh;
  text-decoration: none;
  background-color: #383838;
  color: white;
  padding-left: 3vw;
  padding-right: 3vw;
  padding-bottom: 0.75vh;
  border-right: 0.2vw solid white;
}

.content-outer {
  display: flex;
}

.content {
  width: 70vw;
  height: 80vh;
  background-color: white;
  padding-top: 0.5vh;
  margin-left: 0;
}

.content h1,
.content p {
  background-color: white;
  color: black;
  margin-left: 3vw;
  margin-right: 3vw;
}

.sidebar {
  background-color: orange;
  width: 10vw;
  height: 80vh;
}

<h1 class="logo">Logo</h1>

<div class="navbar">
  <a href="www.google.com">Home</a>
  <a href="www.google.com">Products</a>
  <a href="www.google.com">About me</a>
</div>

<div class="content-outer">
  <div class="content">
    <h1>Content</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>

  <div class="sidebar"></div>
</div>

Answer 2

By default, the display: block; property on a div will stack them one on top of another unless specified otherwise.

To avoid this, you can create a wrapper div with the display: flex property.

* {
  font-family: verdana;
  background-color: lightgray;
}

p {
  font-size: 2vh;
}

.logo {
  padding-left: 3vw;
}

.navbar {
  background-color: #383838;
  width: 100vw;
  height: 7vh;
}

.navbar a {
  font-size: 5vh;
  text-decoration: none;
  background-color: #383838;
  color: white;
  padding-left: 3vw;
  padding-right: 3vw;
  padding-bottom: 0.75vh;
  border-right: 0.2vw solid white;
}

.content-outer {
  display: flex;
}

.content {
  width: 70vw;
  height: 80vh;
  background-color: white;
  padding-top: 0.5vh;
  margin-left: 0;
}

.content h1,
.content p {
  background-color: white;
  color: black;
  margin-left: 3vw;
  margin-right: 3vw;
}

.sidebar {
  background-color: orange;
  width: 10vw;
  height: 80vh;
}

<h1 class="logo">Logo</h1>

<div class="navbar">
  <a href="www.google.com">Home</a>
  <a href="www.google.com">Products</a>
  <a href="www.google.com">About me</a>
</div>

<div class="content-outer">
  <div class="content">
    <h1>Content</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>

  <div class="sidebar"></div>
</div>

Answer 3

Answer №2

You have the option to include content and sidebar within a div. This div should be given a position relative, and then you can set the position of sidebar to absolute following the example below.

* {
  font-family: verdana;
  background-color: lightgray;
}

p {
  font-size: 2vh;
}

.logo {
  padding-left: 3vw;
}

.navbar {
  background-color: #383838;
  width: 100vw;
  height: 7vh;
}

.navbar a {
  font-size: 5vh;
  text-decoration: none;
  background-color: #383838;
  color: white;
  padding-left: 3vw;
  padding-right: 3vw;
  padding-bottom: 0.75vh;
  border-right: 0.2vw solid white;
}

.content-outer{
  position: relative;
}

.content {
  width: 70vw;
  height: 80vh;
  background-color: white;
  padding-top: 0.5vh;
  margin-left: 0;
}

.content h1,
.content p {
  background-color: white;
  color: black;
  margin-left: 3vw;
  margin-right: 3vw;
}

.sidebar {
   position: absolute;
   right: 0;
   top: 0;
  background-color: orange;
  width: 10vw;
  height: 80vh;
}

<h1 class="logo">Logo</h1>

<div class="navbar">
  <a href="www.google.com">Home</a>
  <a href="www.google.com">Products</a>
  <a href="www.google.com">About Me</a>
</div>
<div class="content-outer">
  <div class="content">
    <h1>Content</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="sidebar"></div>
</div>

Answer 4

You have the option to include content and sidebar within a div. This div should be given a position relative, and then you can set the position of sidebar to absolute following the example below.

* {
  font-family: verdana;
  background-color: lightgray;
}

p {
  font-size: 2vh;
}

.logo {
  padding-left: 3vw;
}

.navbar {
  background-color: #383838;
  width: 100vw;
  height: 7vh;
}

.navbar a {
  font-size: 5vh;
  text-decoration: none;
  background-color: #383838;
  color: white;
  padding-left: 3vw;
  padding-right: 3vw;
  padding-bottom: 0.75vh;
  border-right: 0.2vw solid white;
}

.content-outer{
  position: relative;
}

.content {
  width: 70vw;
  height: 80vh;
  background-color: white;
  padding-top: 0.5vh;
  margin-left: 0;
}

.content h1,
.content p {
  background-color: white;
  color: black;
  margin-left: 3vw;
  margin-right: 3vw;
}

.sidebar {
   position: absolute;
   right: 0;
   top: 0;
  background-color: orange;
  width: 10vw;
  height: 80vh;
}

<h1 class="logo">Logo</h1>

<div class="navbar">
  <a href="www.google.com">Home</a>
  <a href="www.google.com">Products</a>
  <a href="www.google.com">About Me</a>
</div>
<div class="content-outer">
  <div class="content">
    <h1>Content</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="sidebar"></div>
</div>

The sidebar is not aligning properly on the page

Answer №1

Answer №2

Similar questions

Restricting the amount of text within a span element

Every time I attempt to insert a background image into a div using jQuery, I am consistently faced with a 404 error message

The padding of the iFrame does not match the padding of the source

What is the best way to organize a list based on its textual content, which may consist of numbers

The crash during compilation is triggered by the presence of react-table/react-table.css in the code

Stop Swiper Slide from moving when clicked on

Creating a dynamic mouse trail effect using CSS and JavaScript without compromising element clickability

When developing a website with HTML/CSS, is it recommended to utilize tables for organizing content

Is there a way to prevent the text next to these FontAwesome icons from moving whenever the icon itself changes?

What is the method to incorporate spread into inner shadow within an SVG file?

Rails is being overwhelmed by an excessive number of icons being added by Bootstrap

What could be the reason for 'selected' not appearing?

Tips for centering a horizontal unordered list within a division element

Located at the lower section of the parent container

Tips for validating a dynamically created form with Bootstrap tabs using jQuery

wrap text image not compatible with responsive layout

Bootstrap file input fields failing to update after file selection

Creating Stylish Checkboxes with Bootstrap

Including a JavaScript file using script tags can cause issues with jQuery UI

How can I make an image the background on a webpage when clicking the mouse?