Center absolute positioned overflowing div
1
This is what I tried and it gets me 99% there.
.polaroids-container
overflow-x: auto;
position: relative;
height: 245px;
padding-top: 10px;
display: -webkit-flex;
-webkit-justify-content: center;
display: flex;
justify-content: center;
padding-left: 0;
padding-right: 0;
.polaroids
position: absolute;
min-width: max-content;
<div class="container-fluid">
<div class="container polaroids-container">
<div class="polaroids">
<div>Images here</div>
<div>Images here</div>
<div>Images here</div>
<div>Images here</div>
<div>Images here</div>
<div>Images here</div>
</div>
</div>
</div>
This will center my content but the first element in the div is getting cut off on the left. As you can see in the image the scroll bar is all the way to the left so you cannot scroll left to see that content.
The objective here is to center all the divs within class polaroids and not have the first one not get chopped off.
html css
edited Nov 12 at 19:45
ksav
4,17121328
asked Nov 12 at 19:41
smack-a-bro
1961518
add a comment |
1
This is what I tried and it gets me 99% there.
.polaroids-container
overflow-x: auto;
position: relative;
height: 245px;
padding-top: 10px;
display: -webkit-flex;
-webkit-justify-content: center;
display: flex;
justify-content: center;
padding-left: 0;
padding-right: 0;
.polaroids
position: absolute;
min-width: max-content;
<div class="container-fluid">
<div class="container polaroids-container">
<div class="polaroids">
<div>Images here</div>
<div>Images here</div>
<div>Images here</div>
<div>Images here</div>
<div>Images here</div>
<div>Images here</div>
</div>
</div>
</div>
This will center my content but the first element in the div is getting cut off on the left. As you can see in the image the scroll bar is all the way to the left so you cannot scroll left to see that content.
The objective here is to center all the divs within class polaroids and not have the first one not get chopped off.
html css
edited Nov 12 at 19:45
ksav
4,17121328
asked Nov 12 at 19:41
smack-a-bro
1961518
add a comment |
1
1
1
This is what I tried and it gets me 99% there.
.polaroids-container
overflow-x: auto;
position: relative;
height: 245px;
padding-top: 10px;
display: -webkit-flex;
-webkit-justify-content: center;
display: flex;
justify-content: center;
padding-left: 0;
padding-right: 0;
.polaroids
position: absolute;
min-width: max-content;
<div class="container-fluid">
<div class="container polaroids-container">
<div class="polaroids">
<div>Images here</div>
<div>Images here</div>
<div>Images here</div>
<div>Images here</div>
<div>Images here</div>
<div>Images here</div>
</div>
</div>
</div>
This will center my content but the first element in the div is getting cut off on the left. As you can see in the image the scroll bar is all the way to the left so you cannot scroll left to see that content.
The objective here is to center all the divs within class polaroids and not have the first one not get chopped off.
html css
edited Nov 12 at 19:45
ksav
4,17121328
asked Nov 12 at 19:41
smack-a-bro
1961518
This is what I tried and it gets me 99% there.
.polaroids-container
overflow-x: auto;
position: relative;
height: 245px;
padding-top: 10px;
display: -webkit-flex;
-webkit-justify-content: center;
display: flex;
justify-content: center;
padding-left: 0;
padding-right: 0;
.polaroids
position: absolute;
min-width: max-content;
<div class="container-fluid">
<div class="container polaroids-container">
<div class="polaroids">
<div>Images here</div>
<div>Images here</div>
<div>Images here</div>
<div>Images here</div>
<div>Images here</div>
<div>Images here</div>
</div>
</div>
</div>
This will center my content but the first element in the div is getting cut off on the left. As you can see in the image the scroll bar is all the way to the left so you cannot scroll left to see that content.
The objective here is to center all the divs within class polaroids and not have the first one not get chopped off.
.polaroids-container
overflow-x: auto;
position: relative;
height: 245px;
padding-top: 10px;
display: -webkit-flex;
-webkit-justify-content: center;
display: flex;
justify-content: center;
padding-left: 0;
padding-right: 0;
.polaroids
position: absolute;
min-width: max-content;
<div class="container-fluid">
<div class="container polaroids-container">
<div class="polaroids">
<div>Images here</div>
<div>Images here</div>
<div>Images here</div>
<div>Images here</div>
<div>Images here</div>
<div>Images here</div>
</div>
</div>
</div>.polaroids-container
overflow-x: auto;
position: relative;
height: 245px;
padding-top: 10px;
display: -webkit-flex;
-webkit-justify-content: center;
display: flex;
justify-content: center;
padding-left: 0;
padding-right: 0;
.polaroids
position: absolute;
min-width: max-content;
<div class="container-fluid">
<div class="container polaroids-container">
<div class="polaroids">
<div>Images here</div>
<div>Images here</div>
<div>Images here</div>
<div>Images here</div>
<div>Images here</div>
<div>Images here</div>
</div>
</div>
</div>html css
html css
edited Nov 12 at 19:45
ksav
4,17121328
asked Nov 12 at 19:41
smack-a-bro
1961518
edited Nov 12 at 19:45
ksav
4,17121328
asked Nov 12 at 19:41
smack-a-bro
1961518
edited Nov 12 at 19:45
ksav
4,17121328
edited Nov 12 at 19:45
ksav
4,17121328
edited Nov 12 at 19:45
ksav
4,17121328
4,17121328
asked Nov 12 at 19:41
smack-a-bro
1961518
asked Nov 12 at 19:41
smack-a-bro
1961518
asked Nov 12 at 19:41
smack-a-bro
1961518
1961518
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
Okay, I did a quick fiddle and I see what you're doing now. Add "left:0" to polaroids. Once your alignment is set, then set your scroll to be centered using JavaScript.
.polaroids
position: absolute;
left:0;
min-width: max-content;
<script>
var polaroidsCont = document.getElementsByClassName("polaroids-container")[0];
var polaroidsInner = document.getElementsByClassName("polaroids")[0];
polaroidsCont.scrollLeft = (polaroidsInner.offsetWidth/2 - polaroidsCont.offsetWidth/2);
</script>
answered Nov 12 at 19:55
Nosajimiki
6701411
All that did was make the overflowing div no longer overflow the parent. I need this div to be scroll-able horizontally.
– smack-a-bro
Nov 12 at 20:01
Did a quick test. Looks like this is an alignment issue and not a margin issue like I first thought. See revised answer.
– Nosajimiki
Nov 12 at 20:26
left:0; completely removes the centering. I need the variable width absolute div to be centered. Even when its overflowing.
– smack-a-bro
Nov 12 at 20:31
Try this. The Left:0 fixes the cropping issue, but you then need to center your scrollbar using the above JavaScript. What you were doing before was centering your content along the margin of your container which was cropping it.
– Nosajimiki
Nov 12 at 21:53
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%2f53269016%2fcenter-absolute-positioned-overflowing-div%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Okay, I did a quick fiddle and I see what you're doing now. Add "left:0" to polaroids. Once your alignment is set, then set your scroll to be centered using JavaScript.
.polaroids
position: absolute;
left:0;
min-width: max-content;
<script>
var polaroidsCont = document.getElementsByClassName("polaroids-container")[0];
var polaroidsInner = document.getElementsByClassName("polaroids")[0];
polaroidsCont.scrollLeft = (polaroidsInner.offsetWidth/2 - polaroidsCont.offsetWidth/2);
</script>
answered Nov 12 at 19:55
Nosajimiki
6701411
All that did was make the overflowing div no longer overflow the parent. I need this div to be scroll-able horizontally.
– smack-a-bro
Nov 12 at 20:01
Did a quick test. Looks like this is an alignment issue and not a margin issue like I first thought. See revised answer.
– Nosajimiki
Nov 12 at 20:26
left:0; completely removes the centering. I need the variable width absolute div to be centered. Even when its overflowing.
– smack-a-bro
Nov 12 at 20:31
Try this. The Left:0 fixes the cropping issue, but you then need to center your scrollbar using the above JavaScript. What you were doing before was centering your content along the margin of your container which was cropping it.
– Nosajimiki
Nov 12 at 21:53
add a comment |
1
Okay, I did a quick fiddle and I see what you're doing now. Add "left:0" to polaroids. Once your alignment is set, then set your scroll to be centered using JavaScript.
.polaroids
position: absolute;
left:0;
min-width: max-content;
<script>
var polaroidsCont = document.getElementsByClassName("polaroids-container")[0];
var polaroidsInner = document.getElementsByClassName("polaroids")[0];
polaroidsCont.scrollLeft = (polaroidsInner.offsetWidth/2 - polaroidsCont.offsetWidth/2);
</script>
answered Nov 12 at 19:55
Nosajimiki
6701411
All that did was make the overflowing div no longer overflow the parent. I need this div to be scroll-able horizontally.
– smack-a-bro
Nov 12 at 20:01
Did a quick test. Looks like this is an alignment issue and not a margin issue like I first thought. See revised answer.
– Nosajimiki
Nov 12 at 20:26
left:0; completely removes the centering. I need the variable width absolute div to be centered. Even when its overflowing.
– smack-a-bro
Nov 12 at 20:31
Try this. The Left:0 fixes the cropping issue, but you then need to center your scrollbar using the above JavaScript. What you were doing before was centering your content along the margin of your container which was cropping it.
– Nosajimiki
Nov 12 at 21:53
add a comment |
1
1
1
Okay, I did a quick fiddle and I see what you're doing now. Add "left:0" to polaroids. Once your alignment is set, then set your scroll to be centered using JavaScript.
.polaroids
position: absolute;
left:0;
min-width: max-content;
<script>
var polaroidsCont = document.getElementsByClassName("polaroids-container")[0];
var polaroidsInner = document.getElementsByClassName("polaroids")[0];
polaroidsCont.scrollLeft = (polaroidsInner.offsetWidth/2 - polaroidsCont.offsetWidth/2);
</script>
answered Nov 12 at 19:55
Nosajimiki
6701411
Okay, I did a quick fiddle and I see what you're doing now. Add "left:0" to polaroids. Once your alignment is set, then set your scroll to be centered using JavaScript.
.polaroids
position: absolute;
left:0;
min-width: max-content;
<script>
var polaroidsCont = document.getElementsByClassName("polaroids-container")[0];
var polaroidsInner = document.getElementsByClassName("polaroids")[0];
polaroidsCont.scrollLeft = (polaroidsInner.offsetWidth/2 - polaroidsCont.offsetWidth/2);
</script>
answered Nov 12 at 19:55
Nosajimiki
6701411
edited Nov 12 at 21:47
answered Nov 12 at 19:55
Nosajimiki
6701411
answered Nov 12 at 19:55
Nosajimiki
6701411
answered Nov 12 at 19:55
Nosajimiki
6701411
6701411
All that did was make the overflowing div no longer overflow the parent. I need this div to be scroll-able horizontally.
– smack-a-bro
Nov 12 at 20:01
Did a quick test. Looks like this is an alignment issue and not a margin issue like I first thought. See revised answer.
– Nosajimiki
Nov 12 at 20:26
left:0; completely removes the centering. I need the variable width absolute div to be centered. Even when its overflowing.
– smack-a-bro
Nov 12 at 20:31
Try this. The Left:0 fixes the cropping issue, but you then need to center your scrollbar using the above JavaScript. What you were doing before was centering your content along the margin of your container which was cropping it.
– Nosajimiki
Nov 12 at 21:53
add a comment |
All that did was make the overflowing div no longer overflow the parent. I need this div to be scroll-able horizontally.
– smack-a-bro
Nov 12 at 20:01
Did a quick test. Looks like this is an alignment issue and not a margin issue like I first thought. See revised answer.
– Nosajimiki
Nov 12 at 20:26
left:0; completely removes the centering. I need the variable width absolute div to be centered. Even when its overflowing.
– smack-a-bro
Nov 12 at 20:31
Try this. The Left:0 fixes the cropping issue, but you then need to center your scrollbar using the above JavaScript. What you were doing before was centering your content along the margin of your container which was cropping it.
– Nosajimiki
Nov 12 at 21:53
All that did was make the overflowing div no longer overflow the parent. I need this div to be scroll-able horizontally.
– smack-a-bro
Nov 12 at 20:01
All that did was make the overflowing div no longer overflow the parent. I need this div to be scroll-able horizontally.
– smack-a-bro
Nov 12 at 20:01
Did a quick test. Looks like this is an alignment issue and not a margin issue like I first thought. See revised answer.
– Nosajimiki
Nov 12 at 20:26
Did a quick test. Looks like this is an alignment issue and not a margin issue like I first thought. See revised answer.
– Nosajimiki
Nov 12 at 20:26
left:0; completely removes the centering. I need the variable width absolute div to be centered. Even when its overflowing.
– smack-a-bro
Nov 12 at 20:31
left:0; completely removes the centering. I need the variable width absolute div to be centered. Even when its overflowing.
– smack-a-bro
Nov 12 at 20:31
Try this. The Left:0 fixes the cropping issue, but you then need to center your scrollbar using the above JavaScript. What you were doing before was centering your content along the margin of your container which was cropping it.
– Nosajimiki
Nov 12 at 21:53
Try this. The Left:0 fixes the cropping issue, but you then need to center your scrollbar using the above JavaScript. What you were doing before was centering your content along the margin of your container which was cropping it.
– Nosajimiki
Nov 12 at 21:53
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53269016%2fcenter-absolute-positioned-overflowing-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
