Align two divs vertically in right of div

Question

I am trying to arrange my webpage in this order : A div containing two sections aligned verically in left of a section with the parent height.

Here is a quick figure of what I am trying to do :

#main {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
    display: block;
}

#three {
    margin:0;
    padding:0;
    float:right;
}

<div id="main">
  <section id="one">
    <p>first section</p>
  </section>
  <section id="two">
    <p>second section</p>
  </section>
  <section id="three">
    <img>
  </section>
</div>

Which css attributes should I give to each of my sections ?

Answer 1

Another options if this is something you are building from scratch, is to use a framework like zurb foundation

This will give you the tools to build this kind of thing very quickly and easily, and not only that, loads of other 'complicated' stuff too. I build near all of my sites in this and it removes about 75% of the time and effort. You can then stipulate what happens on mobile and tablet sizes etc.

Something like this would look like....

<div class="row">
    <div class="medium-6 small-12 columns">
        <div id="one" class="small-12 columns">
            Your content
        </div>
        <div id="two" class="small-12 columns">
            Your content
        </div>
    </div>
    <div id="three" class="medium-6 small-12 columns">
        Your content
    </div>
</div>

Answer 2

Display inline-block, the one with 2 relative and the other one position absolute, fiddle

.wrapper1 section {
  display: inline-block;
  width: 75%;
  position: relative;
  float: left;
}
.wrapper2 section {
  display: inline-block;
  width: 24%;
  position: absolute;
  float: right;
}
#redeem {
  vertical-align: top!important;
}

<div id="redeem">
  <div class="wrapper1">
    <section id="one">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet dolor vel ornare fringilla. Phasellus ac finibus libero. Curabitur tristique sit amet tellus eleifend condimentum. Aenean euismod ultrices justo sit amet maximus. Mauris id
        felis non ligula dictum sollicitudin ut ut magna. Ut eu nisi vitae ipsum finibus gravida. Phasellus libero mi, rhoncus ut malesuada vitae, semper in metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
        Quisque non finibus ante. Donec justo est, blandit ut convallis nec, posuere nec erat. Sed venenatis ornare felis, in egestas eros ultrices sed.</p>
    </section>
    <section id="two">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet dolor vel ornare fringilla. Phasellus ac finibus libero. Curabitur tristique sit amet tellus eleifend condimentum. Aenean euismod ultrices justo sit amet maximus. Mauris id
        felis non ligula dictum sollicitudin ut ut magna. Ut eu nisi vitae ipsum finibus gravida. Phasellus libero mi, rhoncus ut malesuada vitae, semper in metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
        Quisque non finibus ante. Donec justo est, blandit ut convallis nec, posuere nec erat. Sed venenatis ornare felis, in egestas eros ultrices sed.</p>
    </section>
    <div class="wrapper2">
      <section id="three">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet dolor vel ornare fringilla. Phasellus ac finibus libero. Curabitur tristique sit amet tellus eleifend condimentum. Aenean euismod ultrices justo sit amet maximus. Mauris id
          felis non ligula dictum sollicitudin ut ut magna. Ut eu nisi vitae ipsum finibus gravida. Phasellus libero mi, rhoncus ut malesuada vitae, semper in metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
          Quisque non finibus ante. Donec justo est, blandit ut convallis nec, posuere nec erat. Sed venenatis ornare felis, in egestas eros ultrices sed.</p>
      </section>
    </div>
  </div>

Answer 3

Try this: stick the left top and bottom section to the corners by absolute positioning, make the parent div as tall as the content of the right-most section that makes room for the left sections by means of a margin-left.

#redeem {
  width: 500px;
  position: relative;
  border: 1px solid #C00;
}

section {
  border: 1px solid black;
}

section#one,
section#two {
  position: absolute;
  left: 0px;
  width: 180px;
}

section#one {
  top: 0px;
  bottom: 100px;
}

section#two {
  bottom: 0px;
  height: 80px;
}

section#three {
  margin-left: 200px;
}

<div id="redeem">
  <section id="one">
    <p>first section</p>
  </section>
  <section id="two">
    <p>second section</p>
  </section>
  <section id="three">
    <p>third section</p>
    <p>other content of third section</p>
    <p>other content of third section</p>
    <p>other content of third section</p>
    <p>other content of third section</p>
    <p>other content of third section</p>
  </section>
</div>

Answer 4

at first give div#redeem 100% width

secondly make use of an extra parent div that contains only div#one and div#two (call him e.g. div#main)

give div#main 66% width and div#three 34% width (as you like)

thats it.

to make div#main as high as div#redeem:

• if div#redeem has no fixed height, it's height will be adapted to div#three or the height of div#one and div#two (if the latter ones together have more height than div#three)
• for further questions (there are a bunch of solutions) search for 'two divs same height'. a modern solution (with less browser support) would be to use flexboxes (lock at w3schools). an older one might be to use css-tables (div {display:table} ...) - some people don't like that for semantical reasons but imo it's ok in some cases. 'Faux Columns' are another older technique. My suggestion: let it be. let div#redeem adapt it's height dependent from the height of div#three

Answer 5

I added a containing div around #one and #two and then used floats

<div id="redeem">
  <section id="left-side">
      <section id="one">
        <p>first section</p>
      </section>
      <section id="two">
        <p>second section</p>
      </section>
    </section>
  <section id="three">
    <p>third section</p>
  </section>
    <div class="clear"></div>
</div>

#redeem{
    width:100%;
    border-radius:30px;
    background:blue;
    padding:30px;
}
#left-side{
    width:45%;
    float:left;
}
#one{
    width:100%;
    margin-bottom:30px;
    border-radius:30px;
    background:white;
    padding:10px;
    min-height:130px
}
#two{
    width:100%;
    border-radius:30px;
    background:white;
    padding:10px;
    min-height:130px
}
#three{
    width:45%;
    float:left;
    border-radius:30px;
    background:white;
    margin-left:5%;
    padding:10px;
    min-height:300px
}
.clear{
    clear:both;   
}

https://jsfiddle.net/o6h22td4/