Jim Jim - 7 months ago 26
HTML Question

How to position div's like this with CSS?

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:

enter image description here

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

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>