Normally I\'m quite good at CSS but I cannot figure out how to do this particular layout.
I have a container with a maximum width of 1,400 pixels. The left and right ma
Since the red div has a max-width of 1400px
then the space left will be 100vw-1400px
so the space on one side will be the half. You can simply make the padding-right
of the green box to be (100vw - 1400px)/2
which is also 50vw - 700px
.
Here is an example where I consider 600px instead of 1400px:
* {
box-sizing:border-box;
}
body {
margin:0;
}
div.container {
max-width: 600px;
margin: 0 auto;
background:red;
height:50px;
}
img {
display: inline-block;
width: 40%;
height:50px;
background:yellow;
}
div.right {
display: inline-block;
width: 60%;
padding-right:calc(50vw - 300px);
background:green;
}
div.inner {
background:blue;
height:50px;
}
You can also use it as margin-right
of the inner div:
* {
box-sizing:border-box;
}
body {
margin:0;
}
div.container {
max-width: 600px;
margin: 0 auto;
background:red;
height:50px;
}
img {
display: inline-block;
width: 40%;
height:50px;
background:yellow;
}
div.right {
display: inline-block;
width: 60%;
background:green;
}
div.inner {
background:blue;
height:50px;
margin-right:calc(50vw - 300px);
}