How to force content to overflow horizontally in CSS? - css

Question

Is there any way to make the content to flow to left/right instead of down while the container doesn't have enough space for it in CSS?
.container1 {
width: 70%;
float: left;
}
.container2 {
width: 30%;
float: left;
}
.content {
width: 50%;
float: left;
}
.overflowContent {
width: 20%;
float: left;
}
/* You can add background colors to see where every part is */
<div class="container1">
<div class="content">First half</div>
<div class="content">Second half</div>
<div class="overflowContent">Overflow</div>
</div>
<div class="container2"></div>
I want a way that makes the overflow part go on the right side of the container instead of below it.(i want the third part to be displayed on/over the container 2)
My idea was to add something to a link with [ display : hidden ] that only shows up [ display : block ] on the right side of the link on the other parts of the website while we hover on the link.

Answer 1

Add a div inside the container that will hold the overflowing content, and apply overflow-x: auto to the container.
The flexbox code is just a friendly suggestion, much easier to work with than floats for layout.
* { box-sizing: border-box; }
.container {
width: 70%;
border: 5px solid red;
overflow-x: auto; /* this causes anything inside that is wider to overflow horizontally */
}
.inner {
display: flex;
}
.content {
flex: 0 0 50%;
padding: 20px;
background: papayawhip;
}
.overflowContent {
flex: 0 0 20%;
padding: 20px;
background: dodgerblue;
}
<div class="container">
<div class="inner">
<div class="content">First half</div>
<div class="content">Second half</div>
<div class="overflowContent">Overflow</div>
</div>
</div>

Answer 2

You can do this considering inline-block and white-space:nowrap. Don't forget to reset the whitespace between inline element (I used the font-size trick here)
.container1 {
width: 70%;
display:inline-block;
outline:1px solid red;
}
.container2 {
width: 30%;
display:inline-block;
outline:1px solid green;
}
.content {
width: 50%;
display:inline-block;
font-size:initial;
}
.overflowContent {
display:inline-block;
font-size:initial;
}
body {
font-size:0;
white-space:nowrap;
}
<div class="container1">
<div class="content">First half</div>
<div class="content">Second half</div>
<div class="overflowContent">Overflow</div>
</div>
<div class="container2"></div>