How do I make these elements scroll horizontally instead of vertically. Right now the divs are scrolling vertically I want them to scroll horizontally I can't find the solution and I even set the height of the container.
.specials{
padding: 9rem 0;
}
.specials__left{
height: 516px;
width: 60%;
overflow-x: scroll;
white-space: nowrap;
}
.specials__left-content{
height: 100%;
width: 60%;
margin-right: 30px;
display: inline-block;
float: left;
white-space: normal;
background-color: yellow;
margin-bottom: 40px;
}
<section class="specials">
<div class="specials__left">
<div class="specials__left-content"></div>
<div class="specials__left-content"></div>
<div class="specials__left-content"></div>
<div class="specials__left-content"></div>
<div class="specials__left-content"></div>
<div class="specials__left-content"></div>
<div class="specials__left-content"></div>
</div>
</section>
Try using this:
.grandparent {
width: 200px;
height: 125px;
overflow-x: scroll;
overflow-y: hidden;
}
.parent {
height: 100px;
white-space: nowrap;
}
.child {
display: inline-block;
height: 100px;
width: 100px;
margin-right: 30px;
background-color: blue;
}
<div class="grandparent">
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div
The grandparent element has a limited width (causing the scroll) but the parent element provides the support using white-space: nowrap; to keep it from collapsing. Does this help?
Related
To keep things neat and short:
https://jsfiddle.net/m53ockLu/
.container {
max-height: 500px;
background: grey;
}
.sidebar {
height: 100vh;
width: 150px;
overflow-x: scroll;
overflow-y: auto;
background: red;
}
.element {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin: 5px;
height: 200px;
width: 20px;
background: green;
}
.first {
position: relative;
display: block;
height: 20px;
width: 100px;
background: pink;
}
.second {
display: inline-block;
}
.second-absolute {
position: absolute;
height: 20px;
width: 250px;
background: purple;
}
<div class="container">
<div class="sidebar">
<div class="element">
<div class="first"></div>
<div class="second">
<div class="second-absolute"></div>
</div>
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
</div>
Is it possible to keep the red container scrollable on vertical axis, and at the same time make the purple (.second-absolute) element overflow this red container horizontally? I'm totally out of ideas, I thought that overflow-x & overflow-y should do the trick, but no dice.
Thank you very much for any help.
Is it possible to keep the red container scrollable on vertical axis, and at the same time make the purple (.second-absolute) element overflow this red container horizontally?
No.
I tried Ethan's suggestion and couldn't get the purple box to visibly overflow the scrollbar:
.container {
max-height: 500px;
background: grey;
}
.sidebar {
height: 100vh;
width: 150px;
overflow-y: scroll;
background: red;
}
.element {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin: 5px;
height: 200px;
width: 20px;
background: green;
}
.first {
position: relative;
display: block;
height: 20px;
width: 100px;
background: pink;
}
.second {
display: inline-block;
}
.second-absolute {
position: absolute;
height: 20px;
width: 250px;
background: purple;
}
<div class="container">
<div class="sidebar">
<div class="element">
<div class="first"></div>
<div class="second">
<div class="second-absolute"></div>
</div>
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
</div>
I don't think the browser will let you overflow the scrollbar, I even put z-index, explicitly said to visibly overflow, played around with the position property etc.
Consider this example of letting the content dictate the size:
.container {
max-height: 500px;
background: grey;
}
.sidebar {
height: 100vh;
width: max-content;
overflow-y: auto;
background: red;
}
.element {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin: 5px;
height: 200px;
background: green;
}
.first {
display: block;
height: 20px;
background: pink;
}
.second {
display: inline-block;
}
.second-absolute {
height: 20px;
width: 250px;
background: purple;
}
<div class="container">
<div class="sidebar">
<div class="element">
<div class="first"></div>
<div class="second">
<div class="second-absolute"></div>
</div>
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
</div>
You made the parent div sidebar have overflow-x: scroll;, overflow-y: auto;. Instead, make each child have its own overflow properties instead of the parent.
I'm trying to understand why I cannot scroll horizontally to see the other pink thumbs. I added an overflow of scroll-x to the thumbs container and thought it would allow me to scroll horizontally to see the other thumbs; instead, it only scrolls vertically.
Can someone explain why it doesn't scroll horizontally? thanks a million
#content-wrap {
background: lightgreen;
width: 300px;
height: 300px;
}
#main-image {
background: cyan;
width: 300px;
height: 250px;
float: left;
}
#thumbs-wrap {
background: orange;
width: 300px;
height: 50px;
float: left;
overflow-x: scroll;
}
.thumb {
background: pink;
box-sizing: border-box;
width: 75px;
height: 50px;
border: 2px solid grey;
float: left;
}
<div id="content-wrap">
<div id="main-image"></div>
<div id="thumbs-wrap">
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
</div>
</div>
It's because your #thumbs-wrap has fixed width, and it's not enough to keep all child elements in one row or add horizontal scrollbar. As an easy solution, you can wrap all child elements inside another one div and give extra-width to it. Here is an example:
#content-wrap {
background: lightgreen;
width: 300px;
height: 300px;
}
#main-image {
background: cyan;
width: 300px;
height: 250px;
float: left;
}
#thumbs-wrap {
background: orange;
width: 300px;
height: 50px;
float: left;
overflow-x: scroll;
}
#thumbs-inner-wrap {
width: 1000px;
}
.thumb {
background: pink;
box-sizing: border-box;
width: 75px;
height: 50px;
border: 2px solid grey;
float: left;
}
<div id="content-wrap">
<div id="main-image"></div>
<div id="thumbs-wrap">
<div id="thumbs-inner-wrap">
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
</div>
</div>
</div>
HTML elements will usually wrap to new lines when there is no more horizontal space. That's why you get a vertical scrollbar even if you set overflow-x: auto. You can use CSS flexbox to override this behavior without adding any more elements. Add the following to your CSS:
#thumbs-wrap {
display: flex;
flex-wrap: nowrap;
}
.thumb {
flex: 0 0 auto;
}
How does this work?
flex-wrap:nowrap makes sure we force the child elements to stay on one line, and not wrap to new lines.
Now usually this might make the flex items shrink or grow to fit the horizontal space of their parent element. We can control this by controlling their sizes.
The flex property with three values is shorthand for flex: flex-grow flex-shrink flex-basis.
With flex-grow and flex-shrink set to 0, the flex items are not allowed to either grow/expand or shrink to fit the space of the container.
flex-basis:auto makes sure the flex items are sized exactly the way we have already sized them in our CSS.
Together these rulesets forces the flex items (.thumb) to be aligned horizontally, not wrap to a second line and to remain their original size. This will force a horizontal scrollbar to appear on the #thumbs-wrap element.
You can see how this works out together with your code:
#content-wrap {
background: lightgreen;
width: 300px;
height: 300px;
}
#main-image {
background: cyan;
width: 300px;
height: 250px;
float: left;
}
#thumbs-wrap {
background: orange;
width: 300px;
height: 50px;
float: left;
overflow-x: scroll;
display: flex;
flex-wrap: nowrap;
}
.thumb {
flex: 0 0 auto;
background: pink;
box-sizing: border-box;
width: 75px;
height: 50px;
border: 2px solid grey;
float: left;
}
<div id="content-wrap">
<div id="main-image"></div>
<div id="thumbs-wrap">
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
</div>
</div>
I can't figure out how to keep multiple divs inline if their width exceeds container width.If the width of all divs is about 1000 px and the container's width is 500 , i want the divs to be overlapped by container , and a horizontal scroll bar to show up.
#container {
overflow: hidden;
background: red;
width: 500px;
height: 500px;
}
#container>div {
border: 1px solid #000;
width: 30%;
height: 100px;
margin: 10px;
float: left;
}
<div id="container">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="fourth"></div>
<br style="clear: both;">
</div>
Fiddle: Click
Don't use float, use inline block with container set to nowrap for white space, and then add overflow: auto; to the container to trigger the scrollbar as needed.
jsFiddle
#container{
white-space: nowrap;
overflow: auto;
}
#container>div{
display: inline-block;
}
Add some CSS
#container {
background: red none repeat scroll 0 0;
height: 200px;
overflow: auto;
white-space: nowrap;
width: 500px;
}
#container > div {
border: 1px solid #000;
display: inline-block;
height: 100px;
margin: 10px;
width: 30%;
}
http://jsfiddle.net/WGCyu/1325/
As Pangloss says, don't use float, but display them inline. And use overflow-x:scroll
#container {
overflow: hidden;
background: red;
width: 500px;
height: 500px;
white-space: nowrap;
overflow-x:scroll
}
#container>div {
border: 1px solid #000;
width: 30%;
height: 100px;
margin: 10px;
display: inline-block;
}
<div id="container">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="fourth"></div>
<br style="clear: both;">
</div>
I have Ios mobile app and using WebKit Safari. I have an container with items. Container must swipe up/down. Elements inside container - left/right. The problem is, when i set overflow: auto; to both - and container and elements, when i swipe elements - they works. But if i want swipe the hole container (up/down), it don't. I need to swap elements and container too Please help!
<div id="container">
<div id="data-container">
<div class="left-right">
<div class="some-content"></div>
</div>
<div class="left-right">
<div class="some-content"></div>
</div>
<div class="left-right">
<div class="some-content"></div>
</div>
</div>
</div>
#container{
height: 100px;
width: 200px;
}
#data-container{
height: 500px;
width: 200px;
overflow-y: auto;
}
.left-right{
height: 50px;
width: 300px;
overflow-x: auto;
}
After a lot of testing I think I found a solution to what you mean.
Here the green elements move left and right, and the whole red container moves up and down.
#container {
background: blue;
height: 100px;
width: 200px;
overflow-x: hidden;
}
#data-container {
background: red;
height: 500px;
width: 200px;
white-space: nowrap;
overflow: auto;
}
.left-right {
background: green;
overflow-x: auto;
}
.some-content {
width: 300px;
height: 50px;
}
<div id="container">
<div id="data-container">
<div class="left-right">
<div class="some-content">LEFT-RIGHT A</div>
</div>
<div class="left-right">
<div class="some-content">LEFT-RIGHT B</div>
</div>
<div class="left-right">
<div class="some-content">LEFT-RIGHT C</div>
</div>
ONLY UP AND DOWN
</div>
</div>
I have a fixed div and inside of it an x-scrollable div which contains many items.
this is my code :
<div class="gallery-items" style="position: fixed">
<div class="scrollable">
<div class='gallery-items-item'>....</div>
<div class='gallery-items-item'>....</div>
<div class='gallery-items-item'>....</div>
<div class='gallery-items-item'>....</div>
<div class='gallery-items-item'>....</div>
<div class='gallery-items-item'>....</div>
<div class='gallery-items-item'>....</div>
</div>
</div>
.gallery-items {
position: fixed;
.....
}
.scrollable {
overflow-x: scroll;
overflow-y: hidden;
width: 100%;
height: 100%;
white-space: nowrap;
}
.gallery-items-item {
height: 130px;
width: 150px;
cursor: pointer;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
margin-right: 10px;
position: relative;
background-color: #4d4d4d;
display: inline-block;
}
but the items are not aligned on the same scrollable line.. (http://croisentoi.com/cafe/menu/ when clicking on a picture)
Is there something I miss ? Thank you.
Add vertical-align: top; to .gallery-items-item to align them all to the top of gallery-items.
Try using
vertical-align:medium;
Hope it helps you..