user5544792 user5544792 - 5 months ago 10
HTML Question

Stack divs vertically & keep 2 column layout

I want to have two stacked divs on one side, and then have a single column on the other side with the same height as the divs.

Kind of like this:

SS

I have the two divs and a side bar, but the two divs won't stack.

Here is what I have so far: https://jsfiddle.net/Kryometric/y71tkmtw/

@import url(https://fonts.googleapis.com/css?family=Oxygen);
body {
background-color: #222;
}
.description h1 {
text-align: left;
padding: 20px;
}
#wrapper {
text-align: center;
}
.description,
.sidebar,
.demo-container {
display: inline-block;
vertical-align: top;
}
.description {
background: #eee;
width: 50%;
font-family: "Oxygen";
font-size: 14px;
color: #000;
line-height: 1.2;
}
.sidebar {
background: #eee;
width: 15%;
height: 575px;
}
.demo-container {
background: #eee;
width: 50%;
font-family: "Oxygen";
font-size: 14px;
color: #000;
line-height: 1.2;
}


<div id='wrapper' >
<div class="demo-container">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium lorem nec tortor elementum.</p>
</div>
<div class="description">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium lorem nec tortor elementum.</p>
</div>
<div class="sidebar">
</div>



Answer

Just add another <div> surrounding the 2 divs on the left-hand side, with float:left. Add float:right to the sidebar.

      .left-container
      {
        width: 85%;
        float:left;

      }      
      .sidebar {
        background: #eee;
        width: 15%;
        height: 575px;
        float:right;
      }    

Fiddle: https://jsfiddle.net/dncgytef/2/

Comments