CODEWITHSUNDEEP
htmlcss
samburg wilks
samburg wilks

Reputation: 43

HTML CSS div set height to free space

Here's my Code:

<body>
    <div class="header"><img class="logo" height="50px" style="align-self: center;"></div>
    <div class="side">
        <ul>
            <li class="liactive">
                <a href="#"></a>
                <span><i class="fa fa-columns"></i></span>
                <span>&nbsp;&nbsp;&nbsp;Dashboard</span>
            </li>
        </ul>
    </div>
    <div class="wrapper">
        <div class="grid"></div>
    </div>
</body>

.side{
        width: 280px;
    }
    .side ul li span:nth-child(3){
        display: inline;
    }

    .side ul li{
        padding: 10px;
        font-family: rbbold;
        font-size: 26px;
    }
    .logo{
        content: url("../images/x.png");
        margin-left: 20px
    }
    .wrapper{
        padding-top: 88px;;
        padding-left: 280px;
        background-color: lightskyblue;
        width: 100% - 280px;
        height: 100vh;
    }
    .grid{
        margin-top: 50px;
        background-color: lightsalmon;
        margin-left: 50px;
        width: 50%;
        height: 50%;
    }

It looks like this:

Here

However, I want the orange block to be centered in the blue block, with a margin of 50px all around, relative to the top and sidebar.

I have the first 2, but I am having trouble with the right and bottom sides. The right side:

The bottom side:

Any help would be appreciated. Thank you!

Upvotes: 0

Views: 38

Answers (1)

symlink
symlink

Reputation: 12209

.wrapper should have padding: 50px all around, and .grid should have a height and width of 100%

.side {
  width: 280px;
}

.side ul li span:nth-child(3) {
  display: inline;
}

.side ul li {
  padding: 10px;
  font-family: rbbold;
  font-size: 26px;
}

.logo {
  content: url("../images/x.png");
  margin-left: 20px
}

.wrapper {
  background-color: lightskyblue;
  width: 100% - 280px;
  height: 100vh;
  padding:50px;
}

.grid {
  background-color: lightsalmon;
  width: 100%;
  height: 100%;
}
<body>
  <div class="header"><img class="logo" height="50px" style="align-self: center;"></div>
  <div class="side">
    <ul>
      <li class="liactive">
        <a href="#"></a>
        <span><i class="fa fa-columns"></i></span>
        <span>&nbsp;&nbsp;&nbsp;Dashboard</span>
      </li>
    </ul>
  </div>
  <div class="wrapper">
    <div class="grid"></div>
  </div>
</body>

Upvotes: 1

Related Questions