CODEWITHSUNDEEP
htmlcssflexbox
WKcho
WKcho

Reputation: 67

How to arrange 3 divs: div 1 and 2 stacked in left column, and div 3 is right column

I've got three div's that I'd like to arrange like this

enter image description here

My code should look like this :

<div class="container">
    <div class="div1">Div #1</div>
    <div class="div2">Div #2</div>
    <div class="div3">Div #3</div>    
</div>

So - what should my css / html be if at all possible to do?

Upvotes: 3

Views: 1847

Answers (3)

Naga Sai A
Naga Sai A

Reputation: 10975

To achieve your expected result, use following option

.container {
  height: 100px;
}

.div1 {
  float: left;
  postion: absolute;
  width: 20%;
  border: 1px solid black;
  height: 50%;
}

.div2 {
  float: left;
  clear: both;
  vertical-align: bottom;
  width: 20%;
  border: 1px solid black;
  height: 50%;
}

.div3 {
  display: inline-block;
  width: 20%;
  height: 100%;
  border: 1px solid black;
}

http://codepen.io/nagasai/pen/KMWgEz

Upvotes: 1

Michael Benjamin
Michael Benjamin

Reputation: 371221

.container {
    display: flex;              /* establish flex container */
    flex-direction: column;     /* align children (flex items) vertically */
    flex-wrap: wrap;
    height: 120px;
}

.container > div {
    flex: 1 0 50px;            /* occupy free space, don't shrink, initial height */
    width: calc(50% - 10px);   /* half container size less margins */
    margin: 5px;
    box-sizing: border-box;
    border: 1px solid black;
}
<div class="container">
    <div class="div1">Div #1</div>
    <div class="div2">Div #2</div>
    <div class="div3">Div #3</div>
</div>

Benefits of flexbox:

  1. minimal code; very efficient
  2. centering, both vertically and horizontally, is simple and easy
  3. equal height columns are simple and easy
  4. multiple options for aligning flex elements
  5. it's responsive
  6. unlike floats and tables, which offer limited layout capacity because they were never intended for building layouts, flexbox is a modern (CSS3) technique with a broad range of options.

To learn more about flexbox visit:

Browser support:

Flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, use Autoprefixer. More details in this answer.

Upvotes: 4

jelliaes
jelliaes

Reputation: 505

<style type="text/css">
.main{
    height:500px;
    width:400px;
}
div.subDiv{
    height:50%;
    margin:5px;
}
div.subDiv>div{
    width:47%;
    height:100%;
    display:inline-block;
}
div.subDiv>div>div{
    height: 122.5px;
    background-color:gray;
}
div.subDiv>div>div+div{
    margin-top:5px
}
.gray{
    background-color:gray;
}
</style>
<div class="main">
    <div class="subDiv">
        <div>
            <div></div>
            <div></div>
        </div>
        <div class="gray"></div>
    </div>
</div>

Try this.

Upvotes: 2

Related Questions