CODEWITHSUNDEEP
htmlcss
zeeentt
zeeentt

Reputation: 13

Achieving a specific layout, but I am getting a different thing

I would like to achieve a specific layout but when I try to do it, it gets all out of order. I want it like in this picture. Can anyone help?

img

body {
  margin: 0px;
}

.top {
  width: 100%;
  background-color: blue;
  height: 40px;
  color: white;
}

.content {
  margin-left: 100px;
  height: 100%;
}

.sidebar {
  width: 100px;
  position: fixed;
  height: 100%;
  background-color: red;
}

.footer {
  height: 40px;
  width: 100%;
  background-color: black;
}
<div class="sidebar"></div>

<div class="content">
  <div class="top">My website example</div>

  <p>I start here</p>
</div>

<div class="footer"></div>

Upvotes: 1

Views: 32

Answers (2)

Siona Fernandes
Siona Fernandes

Reputation: 375

Using flexbox

<section>
  <div class="sidebar">
   
  </div>
  <div class="content">
    <div class="top">My website example</div>
    <p>
      I start here
    </p>
  </div>
</section>

<div class="footer"></div>

section {
  display: flex;
 height:100vh;
}

.sidebar {
  width: 100px;
  background-color: red;
}
.content{
  width:100%;
}
.top {
  background-color: blue;
  height: 40px;
  color: white;
}


.footer {
  height: 40px;
  width: 100%;
  background-color: black;
}

Upvotes: 1

manjiro sano
manjiro sano

Reputation: 842

Well, you were only missing a few things on your footer. If you want it to be on a specific spot, you should use position: absolute or position: fixed, like you used on your sidebar. And insert a bottom: 0, to indicate that you want it on the bottom, and not at the top or right/left.

body {
  margin: 0px;
}

.top {
  width: 100%;
  background-color: blue;
  height: 40px;
  color: white;
}

.content {
  margin-left: 100px;
  height: 100%;
}

.sidebar {
  width: 100px;
  position: fixed;
  height: 100%;
  background-color: red;
}

.footer {
  height: 40px;
  width: 100%;
  background-color: black;
  position: absolute;
  bottom: 0;
}
<div class="sidebar"></div>
<div class="content">
  <div class="top">My website example</div>
  <p>
    I start here
  </p>
</div>
<div class="footer"></div>

Upvotes: 1

Related Questions