Sidebar isn't positioning correctly-CodePudding

Im creating a simple website but Im having trouble positioning the sidebar correctly. It should be on the right side of the content but it keeps being put below the content.

* {
  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 >Logo</h1>

<div >
  <a href="www.google.com">Home</a>
  <a href="www.google.com">Produkte</a>
  <a href="www.google.com">Ueber mich</a>
</div>

<div >
  <h1>Inhalt</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 ></div>

The text is in german which shouldn't make a difference. Also ".sidebar" is the sidebar and it should be positioned on the right side of ".content".

CodePudding user response：

Unless you specify a display property, div by default will have display: block; which stacks divs one on top of another.

One solution is to create a wrapper div with display: flex

* {
  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 >Logo</h1>

<div >
  <a href="www.google.com">Home</a>
  <a href="www.google.com">Produkte</a>
  <a href="www.google.com">Ueber mich</a>
</div>

<div >
  <div >
    <h1>Inhalt</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 ></div>
</div>

CodePudding user response：

You can add content and sidebar in a div. give that div a position relative and make sidebar position absolute as shown 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 >Logo</h1>

<div >
  <a href="www.google.com">Home</a>
  <a href="www.google.com">Produkte</a>
  <a href="www.google.com">Ueber mich</a>
</div>
<div >
  <div >
    <h1>Inhalt</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 ></div>
</div>