CODEWITHSUNDEEP
css
GodmanT
GodmanT

Reputation: 7

CSS Float with blocks

I have a problem, how i can fix blocks?

  1. Block Sidebar

    .sidebar {
    display: block;
    width: 250px;
    float: left;
    height: 100%;
    background-color: #2b2b2b;
    margin-right: 15px;
}

  2. Block Content 

    .content-panel {
    margin-right: 15px;
    margin-top: 15px;
}

Problem: image

How i can fix content block? I have to make sure that the unit does not take into account the width of the sidebar, while its width is 100%, and sidebar 250px

Upvotes: 0

Views: 50

Answers (2)

t1m0n
t1m0n

Reputation: 3431

You can also use just margin-left to get content block width 100% - 250px:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.sidebar {
  background: lightblue;
  float: left;
  height: 100vh;
  width: 250px;
}

.content {
  margin-left: 250px;
  padding: 16px;
  height: 100vh;
  background: gold;
}
<div class="sidebar"></div>
<div class="content">Content</div>

Upvotes: 0

Johannes
Johannes

Reputation: 67748

use 

.content-panel {
    width: calc(100% - 280px);
    margin-left: 265px;
    margin-right: 15px;
    margin-top: 15px;
}

That width subtracts the width of the sidebar and all the margins from 100%, the margin-left moves it to the right.

Upvotes: 1

Related Questions