How to position div's like this with CSS? - html

Question

Trying to maintain an space between them, I'd like to position some divs in a specific form for my website, and then add content to them. I have been styling the pages responsively, so I would like to know if position those divs this way with responsiveness is posible. The result I guess it could be something like this:
Being X and Y the two div's I've already created (for the header and the menu) and Z the footer. The div's I'd like to put in those positions are those DIV 1, DIV 2 and DIV 3.
For the moment the two main parts above (header and menu) are styled like this:
* {
margin:0;
padding:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
header {
width:90%;
height:30%;
margin: 0 auto;
background-color:darkblue;
color:white;
z-index: 105;
position:relative;
}
nav {
width:90%;
height:22%;
margin: 0 auto;
background-color:skyblue;
}
And the HTML I have for the moment for those DIV 1, DIV 2 and DIV 3 is this:
<div id="content">
<div id="leftinfo">
<ul>
<li>INFO</li>
<li>ABOUT</li>
</ul>
</div>
<div id="hcontent">
<div class="tophcontent">
</div>
</div>
<div id="hcontent2">
<p></p>
</div>
</div>
I've been struggling on how to position it like this, maintaining the web flow with the other divs. Any help or tips about it would be very appreciated.

Answer 1

I guess that you want something like
https://jsfiddle.net/2dxzr1mv/3/
*{
box-sizing:border-box;
white-space: nowrap;
}
div{
padding:0;
margin:0;
}
.div1{
width:20%;
height:100%;
background-color:red;
min-height:100vh;
display:inline-block;
}
.wrapper{
width:80%;
min-height:100vh;
display:inline-block;
}
.div2,.div3{
width:100%;
min-height:50vh;
background-color:yellow;
word-wrap: break-word;
overflow:hidden;
white-space: normal;
}
.div3{
background-color:blue;
}

Answer 2

I have tried something like your picture.
CSS
* {
margin:0;
padding:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#content {
table-layout: fixed;
display: table;
width: 100%;
height: 100%;
}
#content > div {
display: table-cell;
}
.tophcontent {
height: 40px;
margin: 0 10px;
border: 2px solid orange;
}
.midhcontent {
margin: 10px;
margin-bottom: 0;
height: calc(100% - 46px);
border: 2px solid green;
}
#leftinfo {
border: 3px solid gray;
width:120px;
}
HTML
<div id="content">
<div id="leftinfo">
<ul>
<li>INFO</li>
<li>ABOUT</li>
</ul>
</div>
<div id="header">
<div class="tophcontent">
</div>
<div class="midhcontent">
</div>
</div>
</div>
Here is my JSfiddle

Answer 3

Here is a sample using display: flex. It has today about 94% browser support, which I think one can consider very good.
A great benefit with this, it is fully dynamic regarding the content in each of the elements compared to float and inline-block versions.
html, body {
margin: 0;
height: 100%;
min-height: 100%;
}
* {
box-sizing: border-box;
}
.container {
min-height: 100%;
display: flex;
flex-direction: column;
}
.info, .about, .content-left, .content-right-top,
.content-right-bottom, .footer {
border: 1px solid;
}
.wrapper {
flex: 1;
display: flex;
min-height: 100%;
}
.content-left, .wrapper-inner {
flex: 1;
}
.wrapper-inner {
display: flex;
flex-direction: column;
min-height: 100%;
}
.content-right-top, .content-right-bottom {
flex: 1;
}
<div class="container">
<div class="info">
Info<br>
2 lines
</div>
<div class="about">
About<br>
in<br>
3 lines
</div>
<div class="wrapper">
<div class="content-left">
Left take all the rest of the space
Left take all the rest of the space
Left take all the rest of the space
Left take all the rest of the space
Left take all the rest of the space
Left take all the rest of the space
Left take all the rest of the space
Left take all the rest of the space
Left take all the rest of the space
</div>
<div class="wrapper-inner">
<div class="content-right-top">
Right - Top
Right - Top
Right - Top
Right - Top
Right - Top
Right - Top
Right - Top
Right - Top
</div>
<div class="content-right-bottom">
Right - Bottom
Right - Bottom
Right - Bottom
Right - Bottom
Right - Bottom
Right - Bottom
Right - Bottom
</div>
</div>
</div>
<div class="footer">
Footer<br>
has 2 lines
</div>
</div>

Answer 4

Is it something like this you mean ?
Codepen example
body, html{
height:100%;
}
#wrapper{
position:relative;
width: 90%;
height:100%;
margin:0 auto;
}
.left{
float:left;
width:30%;
height:100%;
background:green;
}
.top-right{
position:absolute;
right:0;
left:31%;
height:30%;
float:left;
background:blue;
}
.bottom-right{
position:absolute;
right:0;
left:31%;
bottom:0;
top:32%;
float:left;
background:red;
}