CODEWITHSUNDEEP
htmlcss
Axiol
Axiol

Reputation: 5962

How to achieve a one big section on the left and 2 smalls on the right layout?

I'm trying to do a layout like this one

enter image description here

I need to support until IE10 and have like requirement to keep the ratio on resposive (which I do by using vw). Content of the section will be text.

So, the base looks like that

<div class="wrapper">
  <div class="main">
    // ...
  </div>
</div>

And 

.wrapper {
  max-width: 1060px;
  margin: 0 auto;
}

.main {
  width: 100%;
  height: 36.5vw;
  max-height: 416px;
}

But I can't manage to finish it... Any help?

Upvotes: 1

Views: 52

Answers (3)

VXp
VXp

Reputation: 12068

If that's the case then you can do it with the positioning:

body {margin: 0}

.wrapper {
  max-width: 1060px;
  margin: 0 auto;
}

.main {
  position: relative;
  width: 100%;
  height: 36.5vw;
  max-height: 416px;
}

.main > div {
  position: absolute;
  background: #777;
}

.left {top: 0;left: 0;width: calc(70% - 5px); height: 100%}
.right_t {top: 0;right: 0;width: calc(30% - 5px); height: calc(50% - 5px)}
.right_b {bottom: 0;right: 0;width: calc(30% - 5px); height: calc(50% - 5px)}

/* adjust the calc() values (gaps) to your needs */

/* addition */

@media (max-width: 568px) { /* adjust to your needs */
  .main > div {width: 100%; height: calc(33.33vh - 5px)}
  .right_t {top: calc(33.33vh + 2.5px)}
  .right_b {top: calc(66.66vh + 5px)}
}
<div class="wrapper">
  <div class="main">
    <div class="left"></div>
    <div class="right_t"></div>
    <div class="right_b"></div>
  </div>
</div>

Upvotes: 2

M0ns1f
M0ns1f

Reputation: 2725

Using only floating and width properties you can make it work like this :

.wrapper {
  max-width: 1060px;
  margin: 0 auto;
}

.main {
  width: 100%;
  height: 36.5vw;
  max-height: 416px;
}
.leftone,.rightone {
  height:100%;
}
.leftone {
    background-color:grey;
    width:70%;
    float:left;
  }
.rightone {
    width:30%;
    float:right;
    background-color:#fff;
   }
.rightop,.righbottom
    {
      width:100%;
      height:50%;
      
    }
.main .content {
    width:100%;
    height:100%;
    background-color:grey;
    border:5px solid #fff
}
<div class="wrapper">
  <div class="main">
   <div class="leftone">
     <div class="content"></div>
   </div>
   <div class="rightone">
     <div class="rightop">
      <div class="content"></div>
     </div>
     <div class="righbottom">
      <div class="content"></div>
     </div>
   </div>
  </div>
</div>

Upvotes: 1

James Whiteley
James Whiteley

Reputation: 3474

You can wrap the divs you want on the left and right in separate divs, ie:

<div class="left">
  <div id="box1">...</div>
</div>
<div class="right">
  <div id="box2">...</div>
  <div id="box3">...</div>
</div>

Then in your css you can have:

.left {
  float: left;
  width: [percentage]%;
  ...
}
.right {
  float: right;
  width: [percentage]%;
  ...
}

Something like that should work.

Edit: [percentage] is the percentage of the page/overarching area that is taken up so should preferably add up to 100%.

Upvotes: 0

Related Questions