htmlcssadjustment

CSS: How to adjust two divs align at bottom which use float property and auto width and height

I'm working with 5 divs:

as shown below:

Image

with current width and height settings divs are proportionally responsive to each other.

but problem is if I set height:89% bottom-margin:1% of red div, then they do not produce the same output, sub div which contains red and green, get more height if veiwport is small and it becomes shorter than blue div if viewport is large screen.

I want to adjust it in such a manner that green div remains adjusted accordingly with blue div at bottom all the time, no matters what device i'm using.

Now unfortunately my code doesn't seem to work with fiddle and neither does snippet work, but it works on my browser and so does on liveweave.com.

here is working example on liveweave.com

here is my complete code:

HTML:

<body>
  <div class="main">
    <div class="sub">
      <div class="red"></div>
      <div class="green"></div>
    </div>
    <div class="blue"></div>
  </div>
</body>

CSS:

.main{
  width: auto;
  height: auto;
 }
.sub{
  width: 75%;
  height: auto;
  float: left;
}
.red{
  width: 100%;
  height: 85%;
  background-color: red;
}
.green{
  width: 100%;
  height: 15%;
  background-color: green;
}
.blue{
  width: 25%;
  height: 100%;
  background-color: blue;
  float: right;
}
Solution

  • You can use Flexbox to create this layout. Flexbox will make flex-items same height by default so if you increase height of blue div, it will increase height of sub div also.

    body {
  margin: 0;
}
.main {
  min-height: 100vh;
  display: flex;
}
.blue {
  background: blue;
  flex: 1;
}
.sub {
  flex: 3;
  display: flex;
  flex-direction: column;
}
.red {
  flex: 1;
  background: red;
}
.green {
  background: green;
  flex: 0 0 10%;
}
    <div class="main">
  <div class="sub">
    <div class="red"></div>
    <div class="green"></div>
  </div>
  <div class="blue"></div>
</div>