1

I'm working with 5 divs:

  • Main Div (works as wrapper, width and height set to auto)
  • sub div (contains two divs, red and blue, width:75% and height:auto)
    • red div (height:90% width:auto)
    • green div (height:10% width:auto)
  • blue div (width:25% height:auto)

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;
}
Hassan Zia
  • 330
  • 5
  • 17

1 Answers1

2

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>
Nenad Vracar
  • 118,580
  • 15
  • 151
  • 176
  • well that's what exactly i was looking for. thnx buddy, i'm not much into flex layout btw, so can you please explain how would this work `flex: 0 0 10%` , i understand `10%` represents the height of green div, but what's the function of `0 0` in it? and how does flex order works? – Hassan Zia Mar 05 '17 at 13:40
  • If the `flex-direction` on parent is set to `column` then flex property will define height of flex-item, and `flex: 0 0 10%` is shorthand of `flex-grow: 0`, `flex-shrink: 0` and `flex-basis: 10%`, so basically it will set fixed height of element to 10% – Nenad Vracar Mar 05 '17 at 13:43