I have a page with the following structure:
div.wrapper > div.content > div.item + div.item
The wrapper has a width of 320px, whereas the two div.item come out to around 600px. I need those two to be displayed inline (right now they are display: inline-block;, and have the wrapper's contents scroll horizontally. When I set the div.content width to auto, it takes the width of the wrapper (320px). Setting the width to 200% obviously gets the horizontal scrolling to work, but how do I get div.content to take on the width of its contents to allow for horizontal scrolling?
Note: The wrapper is set to a fixed width and height and has overflow-y: hidden and overflow-x: scroll set, because I do not want vertical scrolling-- only horizontal.
JSFiddle with an example:
http://jsfiddle.net/kh5k7/
As you can see, the red divs will vertically stack. Changing the .content width to 200% (or some value) will cause horizontal scrolling to occur properly. I want this done automatically though, because I have no clue how many elements are going to be in the .content div before hand.
Use white-space:nowrap; on .content
.content{
width: auto;
white-space:nowrap;
}
http://jsfiddle.net/kh5k7/1/
You can have something like this:
.wrapper {
overflow-x: auto;
overflow-y: hidden;
}
.content {
width: auto;
white-space: nowrap;
}
.item {
display: inline-block;
}
Related
I'm currently trying to create a horizontal card row for my website. The cards have a little transition where they lightly rotate and raise on hover, like so:
I want to make the row scrollable on the horizontal axis to make it responsive, but after setting overflow-x: auto; on the container, I noticed that the cards now get clipped, making the hover effect look pretty bad.
I've tried setting overflow-y: visible; on the container but it has no effect. Is there any way I can keep my cards from clipping but still leave the container scrollable?? Thanks in advance for your help.
You should wrap the elements in 2 divs. The first and inner will have a width(for horizontal scroll) that is greater than the viewport. And the second and outer div, will have a width, that is exactly the same as the viewport. The second div will then have the property overflow-x: scroll; overflow-y: hidden and it should work.
Example:
body {
width: 100vw;
height: 100vh;
}
outer-wrapper {
width: 100vw;
height: max-content;
overflow-x: scroll;
overflow-y: hidden;
}
inner-wrapper {
width: 150vw;
height: 100px;
display: flex;
}
cards {
// what ever properties you want
}
I'm stuck on a cssproblem.
I have a div with fixed height, 400px and inside that div there is some variable text. And an image, I need the image to fill the space of the div. The text will change so the space always is different and all must be inside the height bounds.
I found a solution, using display: flex and setting image on background of a div.
You can see code here: https://jsfiddle.net/ckryvuzm/
I tried using display: table but the fixed height of 400px grows when content changes.
Define the Width of the div to 100% that contains the height of 400px and display: flex and flex-direction: column.
Inside it make Image div to the flex-grow: 1.
And put all of your content inside one div, and make overflow: auto, as there will be less content it will not have scroll and if the content grows in size the content will get a scroll-bar.
Here made a fiddle which I think exactly solve your Issue: https://jsfiddle.net/ABhimsaria/vj7bgzpb/2/
#container {
position: relative;
font-size: 20px;
height: 400px;
width:100%;
border:1px solid black;
height: 400px;
display: flex;
flex-flow: column;
}
i have a div (div a) with height 100% and width 320px
Somwhere in that div i have another div (div b) width 500% and height 300px
div b contains several divs that i want to "slide" to when something happens. All that works perfectly but the entire div b is visible. I only want the part thats located in div a to be shown and the rest to be hidden. Like overflow: hidden.
But i just cant seem to get that part working
Div b is made with display: table
Example of my problem is here http://www.heboit.dk/test/scroll.html
Can anyone tell me how i solve this issue?
Your fixed postion destroyed the layout and you need not a overflow again.
#mainlist {
display: block;
background: lightblue;
white-space: nowrap;
/* position: fixed; */
/* overflow: hidden; */
margin-left: 0px;
max-width: 320px;
}
Remove 'display: table-row' from #mainrow
I would like to setup a horizontal container that holds multiple (smaller) columns within it. I have the following setup:
http://jsfiddle.net/f464W/1/
As you can see, when you resize the window, the .column containers just stack vertically when the width of the window is too small to contain them all.
Shouldn't
overflow-x: hidden
Stop the .column class from being displayed when they run off the side of .container?
Add white-space: no-wrap the .container
http://jsfiddle.net/feitla/f464W/17/
.container {
max-height: 600px;
width: 100%;
margin-top: 100px;
background: red;
padding: 0;
overflow-y: hidden;
overflow-x: hidden;
white-space: nowrap;
}
With overflow-x: hidden will hide what exceeds on the right of your div. But the natural behaviour of the divs are to wrap to the line below when they're out of space, therefore nothing exceeds.
You need to make the divs not wrap. if you add white-space: nowrap to your container CSS they will only stack horizontally.
You can add float: left; to .column and that should give you the desired effect. You'll then have to play with margin if you want to maintain the spacing you had between the columns.
I am trying to make a div featuring thumbnails to have a set width (330px) and set height (100px), and make it so the content is arranged horizontally, so that a horizontal scroll bar is used to view the content.
Please see the row of thumbnails in the bottom right corner of my website: http://stevenlloydarchitecture.co.nz/building.html
I want to make it so that only four of the thumbnails are visible, and you scroll horizontally to see the others.
However when I try to specify width the thumbnails get moved below each other (as is currently displayed). I tried making a parent Div (with id "slider" in my example) to set the width and height, and have tried as many combinations of specifying width,height and overflow to the divs on the hope of forcing a horizontal scroll but nothing has worked and I am completely stumped. Thanks in advance for any tips.
You can add the following styles to the #slider div to get only a horizontal scrollbar that scrolls through the images. Afterwards, its just sizing and positioning the div. The white-space: nowrap property tells the images not to wrap to next "lines".
#slider {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
#thumbset {
overflow: visible;
}
You can try the following css :
#slider {
width: 330px;
overflow-x: scroll;
overflow-y: hidden;
}
#thumbset {
width: 550px;// whatever width you want
}
Use this code:
<div style="width: 300px; height: 40px; border: 1px solid black; overflow: auto; white-space: nowrap; font-size: 14px">
Here's a random text .............
</div>
see how this code works in this fiddle, it's an easy way : add horizontal scroll bar