I am working on developing a responsive webpage.
This is what I am aiming to achieve. View jsfiddle
#container {
max-width:500px;
width:100%;
color: #fff;
}
#one {
width:300px;
height:200px;
background:#66BCD9;
float:left;
}
#two {
width:200px;
height:50px;
background:#A1A6E6;
overflow: hidden;
}
#three {
width:200px;
height:50px;
background:#E3A1E6;
overflow: hidden;
}
#four {
width:300px;
height:100px;
background:#ED5894;
float:left;
}
#five {
width:200px;
height:300px;
background:#368736;
overflow: hidden;
}
#six {
width:300px;
height:300px;
background:grey;
overflow:hidden
}<div id="container">
<div id="one">#one</div>
<div id="two">#two</div>
<div id="three">#three</div>
<div id="four">#four</div>
<div id="five">#five</div>
<div id="six">#six</div>
</div>For the desktop view, my goal is to have #six reach the bottom of #four.
When the screen size is reduced (mobile view), the divs are in proper order.
How can I ensure that #six touches the bottom of #four in the desktop view?