40/60 split screen with container - html

Question

I am wondering what is the best way to achieve two background divs (blue and gray) with a container over the top of them (red):
http://s22.postimg.org/44kcq1cqp/screenshot_413.png
I would create two divs for the background colours and 100vh but how would I overlay a container on top so I can make the login area? I'm trying to achieve something like this design:
http://s22.postimg.org/584h1zxdt/screenshot_414.png
Thanks in advance!

Answer 1

here is how I would do that :)
https://fiddle.jshell.net/okjn0oca/
* {
margin: 0;
padding: 0;
}
.content{
width: 100vw;
height: 100vh;
}
.left{
position: absolute;
top: 0;
left: 0;
width: 40vw;
height: 100vh;
background-color: blue;
}
.right {
position: absolute;
right: 0;
top: 0;
height: 100vh;
width: 60vw;
background-color: green
}
.menu {
width: calc(100% - 30px);
height: 50px;
background-color: red;
margin: 15px auto;
}
.logo {
width: 60px;
height: 30px;
background-color: red;
margin: 15px;
}
.text{
position: absolute;
width: 30vw;
height: 100px;
left: 5vw;
top: 50%;
transform: translateY(-50%);
background-color: yellow;
}
<div class="content">
<div class="left">
<div class="logo">
</div>
<div class="text">
</div>
</div>
<div class="right">
<div class="menu">
</div>
</div>
</div>

Answer 2

You could use a 1px background image on the body:
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAFeCAYAAABEunUfAAAAG0lEQVR42mMUYPj/n3GUGCVGiVFilBglhgMBAK5H0KGRPNKKAAAAAElFTkSuQmCC) no-repeat;
background-size: 40% 100%;
Here's a Codepen with the example
With the background size you force the pixel to cover 40% of the width and 100% of the height.
The 1px background is generated with png-pixel.com.

Answer 3

Not sure if you have actually tried anything, but here's something you can try.
Assuming you only want to have split colors for the background, you don't have to use two divs for that. You can do that with gradient (don't forget vendor prefixes). Then it's just a matter of positioning the "overlay" div as you want.
.bg {
width: 100%;
height: 100vh;
position: relative;
background: linear-gradient(to right, rgba(0,56,199,1) 0%, rgba(0,56,199,1) 40%, rgba(74,74,74,1) 40%, rgba(74,74,74,1) 100%);
}
.overlay {
width: 60%;
height: 25%;
position: absolute;
top: 25%;
left: 10%;
background: white;
}
<div class="bg">
<div class="overlay"></div>
</div>

Answer 4

Use a single container.
<style>
.main
{
background:white;
}
.login
{
background:blue;
}
</style>
<div class="main">
<div class="col-md-5 no-margin">
leave it blank
</div>
<div class="col-md-7 no-margin login">
put your page contents here
</div>
</div>