Ezhno Ezhno - 24 days ago 6
CSS Question

CSS, Responsive DIVs

i'm trying to achieve something like that :

What i'm trying to achieve

1st you must know it should be full-screen, that's why I use %.

So far i've only been able to make the video stay 16:9 whatever the width of my screen is. I also been able to create the two lighter blues divs, but they don't automaticaly fit the space between the video and the footer.

I've also made the red divs.

Now i'm wondering how I can make the little blue divs fit the space, because right now they are not appearing at all and the only way to show them is to set a fixed high, which is not what i'm looking for. Also I wonder how I can make the second figure, for width screens.

Here is my code : http://codepen.io/EzhnoFR/pen/KNMBGO

<div id="aszone">
</div>

<div id="pbzone">

<div id="pgzone">
<video width="100%" preload="none" autoplay="true">
<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
<source type="video/mp4" src="http://brunotarhan.fr/intro.mp4" />

</div>

<div id="ppzone">

<div id="pp1">
</div>

<div id="pp2">
</div>

</div>

</div>

<div id="gzone">
</div>

html, body {
margin: 0;
padding: 0;
}

div{
border: 0px solid black;
}

video{
width:100%; !important;
}

#aszone, #gzone{
height: 10%;
background-color: grey;
background-size: cover;

}

#gzone{
height: 10%;
bottom: 0;
position:absolute;
}

#pbzone{
height: 50%;
position: relative;

}

#ppzone{
float: left;
width: 100%;
height: 50%;
}

#pp1{
width: 50%;
height: 150px;
float: left;
background-color: red;
}

#pp2{
width: 50%;
height: 150px;
float:right;
background-color: yellow;
}

#pgzone{

background-image: url(screenfiles/bg.jpg);
background-size: cover;
border: 0px; !important
}

Answer

Use Flex-box. If u give all blue ones a container, and change from 1 flex-direction: column; to 2 flex-direction: row; and add a container for the lighter blue ones and change the opposit way you have your desired layout.