HTML CSS make divs side by side, out of screen width - html

Question

My goal is to put div with width=100vw, after that div there should be second div with width for example 300px (so that second div should be out of screen). I tried many things with float, display inline and so on, now I don't have any more ideas.
<div id="div1"></div>
<div id="div2"></div>
Here is fiddle with example code
https://jsfiddle.net/kg5ea4sc/5/

Answer 1

You can use white-space: nowrap on parent element and display: inline-block on two inner elements. Also maybe you want to add vertical-align: top so it will look like this Fiddle
.element {
white-space: nowrap;
}
#div1{
background: green;
display: inline-block;
width:100vw;
height: 80px;
}
#div2{
background: red;
display: inline-block;
width:300px;
height: 100px;
}
<div class="element">
<div id="div1"></div>
<div id="div2"></div>
</div>

Answer 2

https://jsfiddle.net/guanzo/kg5ea4sc/18/
The second div is outside of the screen. You'll have to manipulate either it's position or the overflow:hidden property on the container if you want to see it though.
HTML
<div id="container">
<div id="div1"></div>
<div id="div2"></div>
</div>
CSS
#div1{
background: green;
width:100vw;
height: 80px;
}
#div2{
background: red;
width:300px;
height: 100px;
}
div{
display:inline-block;
}
#container{
width:100vw;
white-space:nowrap;
overflow:hidden;
}

Answer 3

Here is my fork of your fiddle: https://jsfiddle.net/nyzvbvo7/1/
You can scoll to the right to see the second div
What I changed:
I added
body {
width: calc(100vw + 300px);
margin: 0;
}
#div1, #div2 {
display: inline-block;
vertical-align: top;
}
So I made the body wide enough to hold both containers and set the container's display to inline-block. vertical-align: top; can be left out, the the containers will be algned at their baseline (which can vary depending on the content)