Horizontal scrolling inside a div Unicorn Meta Zoo #1: Why another podcast? Announcing the arrival of Valued Associate #679: Cesar Manara Data science time! April 2019 and salary with experience The Ask Question Wizard is Live!Make a div fill the height of the remaining screen spaceHow to horizontally center a <div>?How to make div not larger than its contents?How do you easily horizontally center a <div> using CSS?How to align a <div> to the middle (horizontally/width) of the pageHow to make a div 100% height of the browser window?How do I auto-resize an image to fit a 'div' container?Click through div to underlying elementsCSS center text (horizontally and vertically) inside a div blockHow to vertically align an image inside a div?
Mistake in years of experience in resume?
Is a 5 watt UHF/VHF handheld considered QRP?
Contradiction proof for inequality of P and NP?
Is accepting an invalid credit card number a security issue?
What was Apollo 13's "Little Jolt" after MECO?
Does Feeblemind produce an ongoing magical effect that can be dispelled?
Are there moral objections to a life motivated purely by money? How to sway a person from this lifestyle?
How to use @AuraEnabled base class method in Lightning Component?
What is the best way to deal with NPC-NPC combat?
A Dictionary or Encyclopedia of Fantasy or Fairy Tales from the 1960s
Will I lose my paid in full property
"My boss was furious with me and I have been fired" vs. "My boss was furious with me and I was fired"
Why did Israel vote against lifting the American embargo on Cuba?
Retract an already submitted recommendation letter (written for an undergrad student)
"Whatever a Russian does, they end up making the Kalashnikov gun"? Are there any similar proverbs in English?
Could moose/elk survive in the Amazon forest?
Implementing 3DES algorithm in Java: is my code secure?
Can I criticise the more senior developers around me for not writing clean code?
How can I wire a 9-position switch so that each position turns on one more LED than the one before?
"Rubric" as meaning "signature" or "personal mark" -- is this accepted usage?
Second order approximation of the loss function (Deep learning book, 7.33)
With indentation set to `0em`, when using a line break, there is still an indentation of a size of a space
What is this word supposed to be?
Seek and ye shall find
Horizontal scrolling inside a div
Unicorn Meta Zoo #1: Why another podcast?
Announcing the arrival of Valued Associate #679: Cesar Manara
Data science time! April 2019 and salary with experience
The Ask Question Wizard is Live!Make a div fill the height of the remaining screen spaceHow to horizontally center a <div>?How to make div not larger than its contents?How do you easily horizontally center a <div> using CSS?How to align a <div> to the middle (horizontally/width) of the pageHow to make a div 100% height of the browser window?How do I auto-resize an image to fit a 'div' container?Click through div to underlying elementsCSS center text (horizontally and vertically) inside a div blockHow to vertically align an image inside a div?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
1
I need to have a horizontal scroller of divs which each div is basically an image uploader.
I have this HTML/CSS code:
.whiteBox
background-color: rgba(255, 255, 255, 0.95);
margin-left: auto;
margin-right: auto;
margin-top: 15%;
padding-top: 1px;
box-shadow: 0 4px 8px 0 rgba(160, 160, 160, 0.1), 0 6px 20px 0 rgba(160, 160, 160, 0.1);
overflow: auto;
.uploadBox
width: 90vw;
.uploader
background-color: rgb(250, 250, 250);
width: 39vw;
height: 25vh;
margin-left: 4vw;
margin-top: 4vw;
box-shadow: 0 4px 8px 0 rgba(230, 230, 230, 0.2), 0 6px 20px 0 rgba(230, 230, 230, 0.2);
float: left;
max-height: 200px;
<div class="uploadBox whiteBox">
<h1 class="fontTitle"> Upload Your Photos</h1>
<hr>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview1" style="background-image: url(https://picsum.photos/200/300);">
<input type="file" id="imageUpload1">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<!-- many more divs like those goes here.. -->
</div>I need to get this :
Where the Yellow is a box(div) inside the screen (not the screen )
html css
edited Mar 9 at 7:13
Maaz Syed Adeeb
2,98721526
asked Mar 9 at 6:31
CurneliousCurnelious
1
add a comment |
1
I need to have a horizontal scroller of divs which each div is basically an image uploader.
I have this HTML/CSS code:
.whiteBox
background-color: rgba(255, 255, 255, 0.95);
margin-left: auto;
margin-right: auto;
margin-top: 15%;
padding-top: 1px;
box-shadow: 0 4px 8px 0 rgba(160, 160, 160, 0.1), 0 6px 20px 0 rgba(160, 160, 160, 0.1);
overflow: auto;
.uploadBox
width: 90vw;
.uploader
background-color: rgb(250, 250, 250);
width: 39vw;
height: 25vh;
margin-left: 4vw;
margin-top: 4vw;
box-shadow: 0 4px 8px 0 rgba(230, 230, 230, 0.2), 0 6px 20px 0 rgba(230, 230, 230, 0.2);
float: left;
max-height: 200px;
<div class="uploadBox whiteBox">
<h1 class="fontTitle"> Upload Your Photos</h1>
<hr>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview1" style="background-image: url(https://picsum.photos/200/300);">
<input type="file" id="imageUpload1">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<!-- many more divs like those goes here.. -->
</div>I need to get this :
Where the Yellow is a box(div) inside the screen (not the screen )
html css
edited Mar 9 at 7:13
Maaz Syed Adeeb
2,98721526
asked Mar 9 at 6:31
CurneliousCurnelious
1
add a comment |
1
1
1
0
I need to have a horizontal scroller of divs which each div is basically an image uploader.
I have this HTML/CSS code:
.whiteBox
background-color: rgba(255, 255, 255, 0.95);
margin-left: auto;
margin-right: auto;
margin-top: 15%;
padding-top: 1px;
box-shadow: 0 4px 8px 0 rgba(160, 160, 160, 0.1), 0 6px 20px 0 rgba(160, 160, 160, 0.1);
overflow: auto;
.uploadBox
width: 90vw;
.uploader
background-color: rgb(250, 250, 250);
width: 39vw;
height: 25vh;
margin-left: 4vw;
margin-top: 4vw;
box-shadow: 0 4px 8px 0 rgba(230, 230, 230, 0.2), 0 6px 20px 0 rgba(230, 230, 230, 0.2);
float: left;
max-height: 200px;
<div class="uploadBox whiteBox">
<h1 class="fontTitle"> Upload Your Photos</h1>
<hr>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview1" style="background-image: url(https://picsum.photos/200/300);">
<input type="file" id="imageUpload1">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<!-- many more divs like those goes here.. -->
</div>I need to get this :
Where the Yellow is a box(div) inside the screen (not the screen )
html css
edited Mar 9 at 7:13
Maaz Syed Adeeb
2,98721526
asked Mar 9 at 6:31
CurneliousCurnelious
1
I need to have a horizontal scroller of divs which each div is basically an image uploader.
I have this HTML/CSS code:
.whiteBox
background-color: rgba(255, 255, 255, 0.95);
margin-left: auto;
margin-right: auto;
margin-top: 15%;
padding-top: 1px;
box-shadow: 0 4px 8px 0 rgba(160, 160, 160, 0.1), 0 6px 20px 0 rgba(160, 160, 160, 0.1);
overflow: auto;
.uploadBox
width: 90vw;
.uploader
background-color: rgb(250, 250, 250);
width: 39vw;
height: 25vh;
margin-left: 4vw;
margin-top: 4vw;
box-shadow: 0 4px 8px 0 rgba(230, 230, 230, 0.2), 0 6px 20px 0 rgba(230, 230, 230, 0.2);
float: left;
max-height: 200px;
<div class="uploadBox whiteBox">
<h1 class="fontTitle"> Upload Your Photos</h1>
<hr>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview1" style="background-image: url(https://picsum.photos/200/300);">
<input type="file" id="imageUpload1">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<!-- many more divs like those goes here.. -->
</div>I need to get this :
Where the Yellow is a box(div) inside the screen (not the screen )
.whiteBox
background-color: rgba(255, 255, 255, 0.95);
margin-left: auto;
margin-right: auto;
margin-top: 15%;
padding-top: 1px;
box-shadow: 0 4px 8px 0 rgba(160, 160, 160, 0.1), 0 6px 20px 0 rgba(160, 160, 160, 0.1);
overflow: auto;
.uploadBox
width: 90vw;
.uploader
background-color: rgb(250, 250, 250);
width: 39vw;
height: 25vh;
margin-left: 4vw;
margin-top: 4vw;
box-shadow: 0 4px 8px 0 rgba(230, 230, 230, 0.2), 0 6px 20px 0 rgba(230, 230, 230, 0.2);
float: left;
max-height: 200px;
<div class="uploadBox whiteBox">
<h1 class="fontTitle"> Upload Your Photos</h1>
<hr>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview1" style="background-image: url(https://picsum.photos/200/300);">
<input type="file" id="imageUpload1">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<!-- many more divs like those goes here.. -->
</div>.whiteBox
background-color: rgba(255, 255, 255, 0.95);
margin-left: auto;
margin-right: auto;
margin-top: 15%;
padding-top: 1px;
box-shadow: 0 4px 8px 0 rgba(160, 160, 160, 0.1), 0 6px 20px 0 rgba(160, 160, 160, 0.1);
overflow: auto;
.uploadBox
width: 90vw;
.uploader
background-color: rgb(250, 250, 250);
width: 39vw;
height: 25vh;
margin-left: 4vw;
margin-top: 4vw;
box-shadow: 0 4px 8px 0 rgba(230, 230, 230, 0.2), 0 6px 20px 0 rgba(230, 230, 230, 0.2);
float: left;
max-height: 200px;
<div class="uploadBox whiteBox">
<h1 class="fontTitle"> Upload Your Photos</h1>
<hr>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview1" style="background-image: url(https://picsum.photos/200/300);">
<input type="file" id="imageUpload1">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<!-- many more divs like those goes here.. -->
</div>html css
html css
edited Mar 9 at 7:13
Maaz Syed Adeeb
2,98721526
asked Mar 9 at 6:31
CurneliousCurnelious
1
edited Mar 9 at 7:13
Maaz Syed Adeeb
2,98721526
asked Mar 9 at 6:31
CurneliousCurnelious
1
edited Mar 9 at 7:13
Maaz Syed Adeeb
2,98721526
edited Mar 9 at 7:13
Maaz Syed Adeeb
2,98721526
edited Mar 9 at 7:13
Maaz Syed Adeeb
2,98721526
2,98721526
asked Mar 9 at 6:31
CurneliousCurnelious
1
asked Mar 9 at 6:31
CurneliousCurnelious
1
asked Mar 9 at 6:31
CurneliousCurnelious
1
1
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
0
Wrap the upload buttons inside a div and give div these properties overflow-x: scroll; display:flex;
.whiteBox
background-color: rgba(255,255,255,0.95);
margin-left: auto;
margin-right: auto;
margin-top: 15%;
padding-top: 1px;
box-shadow: 0 4px 8px 0 rgba(160, 160, 160, 0.1), 0 6px 20px 0 rgba(160, 160, 160, 0.1);
.scroller
overflow-x: scroll;
display:flex;
.uploadBox
width: 90vw;
.uploader
background-color: rgb(250,250,250);
width: 52vw;
height: 25vh;
margin-left:4vw;
margin-top: 4vw;
box-shadow: 0 4px 8px 0 rgba(230, 230, 230, 0.2), 0 6px 20px 0 rgba(230, 230, 230, 0.2);
float: left;
max-height: 200px;
<div class="uploadBox whiteBox">
<h1 class="fontTitle" > Upload Your Photos</h1>
<hr>
<div class="scroller">
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview1" style="background-image: url(https://picsum.photos/200/300);">
<input type="file" id="imageUpload1">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
</div>answered Mar 9 at 6:57
Abdul BasitAbdul Basit
689516
the title will also scroll left for some reason even that its outside the scroller div.
– Curnelious
Mar 9 at 9:31
@Curnelious removeoverflow: auto;from.whiteBox
– Abdul Basit
Mar 9 at 9:33
thanks, if i do that, the whole page and background will scroll left.. even worse
– Curnelious
Mar 9 at 9:33
you have run the snippet above?Its it working accordingly?
– Abdul Basit
Mar 9 at 9:35
yours works mine not. Will check why, altough its the same
– Curnelious
Mar 9 at 9:36
|
show 4 more comments
2
You mean like this?
.whiteBox
background-color: rgba(255,255,255,0.95);
margin-left: auto;
margin-right: auto;
padding-top: 1px;
box-shadow: 0 4px 8px 0 rgba(160, 160, 160, 0.1), 0 6px 20px 0 rgba(160, 160, 160, 0.1);
.uploadBox
display: flex;
.uploader
flex: 0 0 auto;
background-color: rgb(250,250,250);
width: 39vw;
height: 25vh;
margin-left:4vw;
margin-top: 4vw;
box-shadow: 0 4px 8px 0 rgba(230, 230, 230, 0.2), 0 6px 20px 0 rgba(230, 230, 230, 0.2);
float: left;
max-height: 200px;
<h1 class="fontTitle" > Upload Your Photos</h1>
<div class="uploadBox whiteBox">
<hr>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview1" style="background-image: url(https://picsum.photos/200/300);">
<input type="file" id="imageUpload1">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
</div>Achieved by the following modifications of your code:
- Move
h1outside of.uploadBox - Remove
widthfrom.uploadBox, adddisplay: flex;instead - Add
flex: 0 0 auto;on.uploader
answered Mar 9 at 6:54
morimori
996
add a comment |
0
Just add this style mentioned class
.uploadBox display: flex;overflow-x: scroll;
edited Mar 9 at 7:07
Andronicus
7,58531835
answered Mar 9 at 7:04
KaruppasamyKaruppasamy
14
That wayh1will not stay above the.uploaders.
– mori
Mar 9 at 7:10
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55074687%2fhorizontal-scrolling-inside-a-div%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Wrap the upload buttons inside a div and give div these properties overflow-x: scroll; display:flex;
.whiteBox
background-color: rgba(255,255,255,0.95);
margin-left: auto;
margin-right: auto;
margin-top: 15%;
padding-top: 1px;
box-shadow: 0 4px 8px 0 rgba(160, 160, 160, 0.1), 0 6px 20px 0 rgba(160, 160, 160, 0.1);
.scroller
overflow-x: scroll;
display:flex;
.uploadBox
width: 90vw;
.uploader
background-color: rgb(250,250,250);
width: 52vw;
height: 25vh;
margin-left:4vw;
margin-top: 4vw;
box-shadow: 0 4px 8px 0 rgba(230, 230, 230, 0.2), 0 6px 20px 0 rgba(230, 230, 230, 0.2);
float: left;
max-height: 200px;
<div class="uploadBox whiteBox">
<h1 class="fontTitle" > Upload Your Photos</h1>
<hr>
<div class="scroller">
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview1" style="background-image: url(https://picsum.photos/200/300);">
<input type="file" id="imageUpload1">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
</div>answered Mar 9 at 6:57
Abdul BasitAbdul Basit
689516
the title will also scroll left for some reason even that its outside the scroller div.
– Curnelious
Mar 9 at 9:31
@Curnelious removeoverflow: auto;from.whiteBox
– Abdul Basit
Mar 9 at 9:33
thanks, if i do that, the whole page and background will scroll left.. even worse
– Curnelious
Mar 9 at 9:33
you have run the snippet above?Its it working accordingly?
– Abdul Basit
Mar 9 at 9:35
yours works mine not. Will check why, altough its the same
– Curnelious
Mar 9 at 9:36
|
show 4 more comments
0
Wrap the upload buttons inside a div and give div these properties overflow-x: scroll; display:flex;
.whiteBox
background-color: rgba(255,255,255,0.95);
margin-left: auto;
margin-right: auto;
margin-top: 15%;
padding-top: 1px;
box-shadow: 0 4px 8px 0 rgba(160, 160, 160, 0.1), 0 6px 20px 0 rgba(160, 160, 160, 0.1);
.scroller
overflow-x: scroll;
display:flex;
.uploadBox
width: 90vw;
.uploader
background-color: rgb(250,250,250);
width: 52vw;
height: 25vh;
margin-left:4vw;
margin-top: 4vw;
box-shadow: 0 4px 8px 0 rgba(230, 230, 230, 0.2), 0 6px 20px 0 rgba(230, 230, 230, 0.2);
float: left;
max-height: 200px;
<div class="uploadBox whiteBox">
<h1 class="fontTitle" > Upload Your Photos</h1>
<hr>
<div class="scroller">
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview1" style="background-image: url(https://picsum.photos/200/300);">
<input type="file" id="imageUpload1">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
</div>answered Mar 9 at 6:57
Abdul BasitAbdul Basit
689516
the title will also scroll left for some reason even that its outside the scroller div.
– Curnelious
Mar 9 at 9:31
@Curnelious removeoverflow: auto;from.whiteBox
– Abdul Basit
Mar 9 at 9:33
thanks, if i do that, the whole page and background will scroll left.. even worse
– Curnelious
Mar 9 at 9:33
you have run the snippet above?Its it working accordingly?
– Abdul Basit
Mar 9 at 9:35
yours works mine not. Will check why, altough its the same
– Curnelious
Mar 9 at 9:36
|
show 4 more comments
0
0
0
Wrap the upload buttons inside a div and give div these properties overflow-x: scroll; display:flex;
.whiteBox
background-color: rgba(255,255,255,0.95);
margin-left: auto;
margin-right: auto;
margin-top: 15%;
padding-top: 1px;
box-shadow: 0 4px 8px 0 rgba(160, 160, 160, 0.1), 0 6px 20px 0 rgba(160, 160, 160, 0.1);
.scroller
overflow-x: scroll;
display:flex;
.uploadBox
width: 90vw;
.uploader
background-color: rgb(250,250,250);
width: 52vw;
height: 25vh;
margin-left:4vw;
margin-top: 4vw;
box-shadow: 0 4px 8px 0 rgba(230, 230, 230, 0.2), 0 6px 20px 0 rgba(230, 230, 230, 0.2);
float: left;
max-height: 200px;
<div class="uploadBox whiteBox">
<h1 class="fontTitle" > Upload Your Photos</h1>
<hr>
<div class="scroller">
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview1" style="background-image: url(https://picsum.photos/200/300);">
<input type="file" id="imageUpload1">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
</div>answered Mar 9 at 6:57
Abdul BasitAbdul Basit
689516
Wrap the upload buttons inside a div and give div these properties overflow-x: scroll; display:flex;
.whiteBox
background-color: rgba(255,255,255,0.95);
margin-left: auto;
margin-right: auto;
margin-top: 15%;
padding-top: 1px;
box-shadow: 0 4px 8px 0 rgba(160, 160, 160, 0.1), 0 6px 20px 0 rgba(160, 160, 160, 0.1);
.scroller
overflow-x: scroll;
display:flex;
.uploadBox
width: 90vw;
.uploader
background-color: rgb(250,250,250);
width: 52vw;
height: 25vh;
margin-left:4vw;
margin-top: 4vw;
box-shadow: 0 4px 8px 0 rgba(230, 230, 230, 0.2), 0 6px 20px 0 rgba(230, 230, 230, 0.2);
float: left;
max-height: 200px;
<div class="uploadBox whiteBox">
<h1 class="fontTitle" > Upload Your Photos</h1>
<hr>
<div class="scroller">
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview1" style="background-image: url(https://picsum.photos/200/300);">
<input type="file" id="imageUpload1">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
</div>.whiteBox
background-color: rgba(255,255,255,0.95);
margin-left: auto;
margin-right: auto;
margin-top: 15%;
padding-top: 1px;
box-shadow: 0 4px 8px 0 rgba(160, 160, 160, 0.1), 0 6px 20px 0 rgba(160, 160, 160, 0.1);
.scroller
overflow-x: scroll;
display:flex;
.uploadBox
width: 90vw;
.uploader
background-color: rgb(250,250,250);
width: 52vw;
height: 25vh;
margin-left:4vw;
margin-top: 4vw;
box-shadow: 0 4px 8px 0 rgba(230, 230, 230, 0.2), 0 6px 20px 0 rgba(230, 230, 230, 0.2);
float: left;
max-height: 200px;
<div class="uploadBox whiteBox">
<h1 class="fontTitle" > Upload Your Photos</h1>
<hr>
<div class="scroller">
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview1" style="background-image: url(https://picsum.photos/200/300);">
<input type="file" id="imageUpload1">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
</div>.whiteBox
background-color: rgba(255,255,255,0.95);
margin-left: auto;
margin-right: auto;
margin-top: 15%;
padding-top: 1px;
box-shadow: 0 4px 8px 0 rgba(160, 160, 160, 0.1), 0 6px 20px 0 rgba(160, 160, 160, 0.1);
.scroller
overflow-x: scroll;
display:flex;
.uploadBox
width: 90vw;
.uploader
background-color: rgb(250,250,250);
width: 52vw;
height: 25vh;
margin-left:4vw;
margin-top: 4vw;
box-shadow: 0 4px 8px 0 rgba(230, 230, 230, 0.2), 0 6px 20px 0 rgba(230, 230, 230, 0.2);
float: left;
max-height: 200px;
<div class="uploadBox whiteBox">
<h1 class="fontTitle" > Upload Your Photos</h1>
<hr>
<div class="scroller">
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview1" style="background-image: url(https://picsum.photos/200/300);">
<input type="file" id="imageUpload1">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
</div>answered Mar 9 at 6:57
Abdul BasitAbdul Basit
689516
edited Mar 9 at 7:07
answered Mar 9 at 6:57
Abdul BasitAbdul Basit
689516
answered Mar 9 at 6:57
Abdul BasitAbdul Basit
689516
answered Mar 9 at 6:57
Abdul BasitAbdul Basit
689516
689516
the title will also scroll left for some reason even that its outside the scroller div.
– Curnelious
Mar 9 at 9:31
@Curnelious removeoverflow: auto;from.whiteBox
– Abdul Basit
Mar 9 at 9:33
thanks, if i do that, the whole page and background will scroll left.. even worse
– Curnelious
Mar 9 at 9:33
you have run the snippet above?Its it working accordingly?
– Abdul Basit
Mar 9 at 9:35
yours works mine not. Will check why, altough its the same
– Curnelious
Mar 9 at 9:36
|
show 4 more comments
the title will also scroll left for some reason even that its outside the scroller div.
– Curnelious
Mar 9 at 9:31
@Curnelious removeoverflow: auto;from.whiteBox
– Abdul Basit
Mar 9 at 9:33
thanks, if i do that, the whole page and background will scroll left.. even worse
– Curnelious
Mar 9 at 9:33
you have run the snippet above?Its it working accordingly?
– Abdul Basit
Mar 9 at 9:35
yours works mine not. Will check why, altough its the same
– Curnelious
Mar 9 at 9:36
the title will also scroll left for some reason even that its outside the scroller div.
– Curnelious
Mar 9 at 9:31
the title will also scroll left for some reason even that its outside the scroller div.
– Curnelious
Mar 9 at 9:31
@Curnelious remove
overflow: auto; from .whiteBox– Abdul Basit
Mar 9 at 9:33
@Curnelious remove
overflow: auto; from .whiteBox– Abdul Basit
Mar 9 at 9:33
thanks, if i do that, the whole page and background will scroll left.. even worse
– Curnelious
Mar 9 at 9:33
thanks, if i do that, the whole page and background will scroll left.. even worse
– Curnelious
Mar 9 at 9:33
you have run the snippet above?Its it working accordingly?
– Abdul Basit
Mar 9 at 9:35
you have run the snippet above?Its it working accordingly?
– Abdul Basit
Mar 9 at 9:35
yours works mine not. Will check why, altough its the same
– Curnelious
Mar 9 at 9:36
yours works mine not. Will check why, altough its the same
– Curnelious
Mar 9 at 9:36
|
show 4 more comments
2
You mean like this?
.whiteBox
background-color: rgba(255,255,255,0.95);
margin-left: auto;
margin-right: auto;
padding-top: 1px;
box-shadow: 0 4px 8px 0 rgba(160, 160, 160, 0.1), 0 6px 20px 0 rgba(160, 160, 160, 0.1);
.uploadBox
display: flex;
.uploader
flex: 0 0 auto;
background-color: rgb(250,250,250);
width: 39vw;
height: 25vh;
margin-left:4vw;
margin-top: 4vw;
box-shadow: 0 4px 8px 0 rgba(230, 230, 230, 0.2), 0 6px 20px 0 rgba(230, 230, 230, 0.2);
float: left;
max-height: 200px;
<h1 class="fontTitle" > Upload Your Photos</h1>
<div class="uploadBox whiteBox">
<hr>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview1" style="background-image: url(https://picsum.photos/200/300);">
<input type="file" id="imageUpload1">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
</div>Achieved by the following modifications of your code:
- Move
h1outside of.uploadBox - Remove
widthfrom.uploadBox, adddisplay: flex;instead - Add
flex: 0 0 auto;on.uploader
answered Mar 9 at 6:54
morimori
996
add a comment |
2
You mean like this?
.whiteBox
background-color: rgba(255,255,255,0.95);
margin-left: auto;
margin-right: auto;
padding-top: 1px;
box-shadow: 0 4px 8px 0 rgba(160, 160, 160, 0.1), 0 6px 20px 0 rgba(160, 160, 160, 0.1);
.uploadBox
display: flex;
.uploader
flex: 0 0 auto;
background-color: rgb(250,250,250);
width: 39vw;
height: 25vh;
margin-left:4vw;
margin-top: 4vw;
box-shadow: 0 4px 8px 0 rgba(230, 230, 230, 0.2), 0 6px 20px 0 rgba(230, 230, 230, 0.2);
float: left;
max-height: 200px;
<h1 class="fontTitle" > Upload Your Photos</h1>
<div class="uploadBox whiteBox">
<hr>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview1" style="background-image: url(https://picsum.photos/200/300);">
<input type="file" id="imageUpload1">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
</div>Achieved by the following modifications of your code:
- Move
h1outside of.uploadBox - Remove
widthfrom.uploadBox, adddisplay: flex;instead - Add
flex: 0 0 auto;on.uploader
answered Mar 9 at 6:54
morimori
996
add a comment |
2
2
2
You mean like this?
.whiteBox
background-color: rgba(255,255,255,0.95);
margin-left: auto;
margin-right: auto;
padding-top: 1px;
box-shadow: 0 4px 8px 0 rgba(160, 160, 160, 0.1), 0 6px 20px 0 rgba(160, 160, 160, 0.1);
.uploadBox
display: flex;
.uploader
flex: 0 0 auto;
background-color: rgb(250,250,250);
width: 39vw;
height: 25vh;
margin-left:4vw;
margin-top: 4vw;
box-shadow: 0 4px 8px 0 rgba(230, 230, 230, 0.2), 0 6px 20px 0 rgba(230, 230, 230, 0.2);
float: left;
max-height: 200px;
<h1 class="fontTitle" > Upload Your Photos</h1>
<div class="uploadBox whiteBox">
<hr>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview1" style="background-image: url(https://picsum.photos/200/300);">
<input type="file" id="imageUpload1">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
</div>Achieved by the following modifications of your code:
- Move
h1outside of.uploadBox - Remove
widthfrom.uploadBox, adddisplay: flex;instead - Add
flex: 0 0 auto;on.uploader
answered Mar 9 at 6:54
morimori
996
You mean like this?
.whiteBox
background-color: rgba(255,255,255,0.95);
margin-left: auto;
margin-right: auto;
padding-top: 1px;
box-shadow: 0 4px 8px 0 rgba(160, 160, 160, 0.1), 0 6px 20px 0 rgba(160, 160, 160, 0.1);
.uploadBox
display: flex;
.uploader
flex: 0 0 auto;
background-color: rgb(250,250,250);
width: 39vw;
height: 25vh;
margin-left:4vw;
margin-top: 4vw;
box-shadow: 0 4px 8px 0 rgba(230, 230, 230, 0.2), 0 6px 20px 0 rgba(230, 230, 230, 0.2);
float: left;
max-height: 200px;
<h1 class="fontTitle" > Upload Your Photos</h1>
<div class="uploadBox whiteBox">
<hr>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview1" style="background-image: url(https://picsum.photos/200/300);">
<input type="file" id="imageUpload1">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
</div>Achieved by the following modifications of your code:
- Move
h1outside of.uploadBox - Remove
widthfrom.uploadBox, adddisplay: flex;instead - Add
flex: 0 0 auto;on.uploader
.whiteBox
background-color: rgba(255,255,255,0.95);
margin-left: auto;
margin-right: auto;
padding-top: 1px;
box-shadow: 0 4px 8px 0 rgba(160, 160, 160, 0.1), 0 6px 20px 0 rgba(160, 160, 160, 0.1);
.uploadBox
display: flex;
.uploader
flex: 0 0 auto;
background-color: rgb(250,250,250);
width: 39vw;
height: 25vh;
margin-left:4vw;
margin-top: 4vw;
box-shadow: 0 4px 8px 0 rgba(230, 230, 230, 0.2), 0 6px 20px 0 rgba(230, 230, 230, 0.2);
float: left;
max-height: 200px;
<h1 class="fontTitle" > Upload Your Photos</h1>
<div class="uploadBox whiteBox">
<hr>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview1" style="background-image: url(https://picsum.photos/200/300);">
<input type="file" id="imageUpload1">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
</div>.whiteBox
background-color: rgba(255,255,255,0.95);
margin-left: auto;
margin-right: auto;
padding-top: 1px;
box-shadow: 0 4px 8px 0 rgba(160, 160, 160, 0.1), 0 6px 20px 0 rgba(160, 160, 160, 0.1);
.uploadBox
display: flex;
.uploader
flex: 0 0 auto;
background-color: rgb(250,250,250);
width: 39vw;
height: 25vh;
margin-left:4vw;
margin-top: 4vw;
box-shadow: 0 4px 8px 0 rgba(230, 230, 230, 0.2), 0 6px 20px 0 rgba(230, 230, 230, 0.2);
float: left;
max-height: 200px;
<h1 class="fontTitle" > Upload Your Photos</h1>
<div class="uploadBox whiteBox">
<hr>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview1" style="background-image: url(https://picsum.photos/200/300);">
<input type="file" id="imageUpload1">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
<div class="uploader boxCorners">
<div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
<input type="file" id="imageUpload2">
</div>
</div>
</div>answered Mar 9 at 6:54
morimori
996
answered Mar 9 at 6:54
morimori
996
answered Mar 9 at 6:54
morimori
996
answered Mar 9 at 6:54
morimori
996
996
add a comment |
add a comment |
0
Just add this style mentioned class
.uploadBox display: flex;overflow-x: scroll;
edited Mar 9 at 7:07
Andronicus
7,58531835
answered Mar 9 at 7:04
KaruppasamyKaruppasamy
14
That wayh1will not stay above the.uploaders.
– mori
Mar 9 at 7:10
add a comment |
0
Just add this style mentioned class
.uploadBox display: flex;overflow-x: scroll;
edited Mar 9 at 7:07
Andronicus
7,58531835
answered Mar 9 at 7:04
KaruppasamyKaruppasamy
14
That wayh1will not stay above the.uploaders.
– mori
Mar 9 at 7:10
add a comment |
0
0
0
Just add this style mentioned class
.uploadBox display: flex;overflow-x: scroll;
edited Mar 9 at 7:07
Andronicus
7,58531835
answered Mar 9 at 7:04
KaruppasamyKaruppasamy
14
Just add this style mentioned class
.uploadBox display: flex;overflow-x: scroll;
edited Mar 9 at 7:07
Andronicus
7,58531835
answered Mar 9 at 7:04
KaruppasamyKaruppasamy
14
edited Mar 9 at 7:07
Andronicus
7,58531835
edited Mar 9 at 7:07
Andronicus
7,58531835
edited Mar 9 at 7:07
Andronicus
7,58531835
7,58531835
answered Mar 9 at 7:04
KaruppasamyKaruppasamy
14
answered Mar 9 at 7:04
KaruppasamyKaruppasamy
14
answered Mar 9 at 7:04
KaruppasamyKaruppasamy
14
14
That wayh1will not stay above the.uploaders.
– mori
Mar 9 at 7:10
add a comment |
That wayh1will not stay above the.uploaders.
– mori
Mar 9 at 7:10
That way
h1 will not stay above the .uploaders.– mori
Mar 9 at 7:10
That way
h1 will not stay above the .uploaders.– mori
Mar 9 at 7:10
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55074687%2fhorizontal-scrolling-inside-a-div%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
