overflow: hidden from the middleCan't scroll to top of flex item that is overflowing containerWhy is a flex-child limited to parent size?CSS Centering with TransformCSS - Make divs align horizontallyHow to align a <div> to the middle (horizontally/width) of the pageAdding padding to HTML elements - IE, FF, Chrome etcCSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issueFluid width with equally spaced DIVsDynamic Stretch DIVHow do I add spacing between columns in Bootstrap?Prevent right div from dropping below when the left one is expandedDesign content of pageHow do I get an absolutely positioned div with overflow auto to grow to the width of it's contents with white-space set to nowrap?
Wireless headphones interfere with Wi-Fi signal on laptop
UUID type for NEWID()
Why does SSL Labs now consider CBC suites weak?
Is there any deeper thematic meaning to the white horse that Arya finds in The Bells (S08E05)?
My bread in my bread maker rises and then falls down just after cooking starts
Why do galaxies collide?
Understanding Deutch's Algorithm
I recently started my machine learning PhD and I have absolutely no idea what I'm doing
Developers demotivated due to working on same project for more than 2 years
How will the lack of ground stations affect navigation?
Testing if os.path.exists with ArcPy?
Does this "yield your space to an ally" rule my 3.5 group uses appear anywhere in the official rules?
What is this weird d12 for?
Why are lawsuits between the President and Congress not automatically sent to the Supreme Court
With today's technology, could iron be smelted at La Rinconada?
When did game consoles begin including FPUs?
Can I say: "When was your train leaving?" if the train leaves in the future?
What is the effect of the Feeblemind spell on Ability Score Improvements?
Were any of the books mentioned in this scene from the movie Hackers real?
Why can't I share a one use code with anyone else?
Why did Varys remove his rings?
How would you translate "grit" (personality trait) to Chinese?
Does the wearer know what items are in which patch in the Robe of Useful items?
Could there be something like aerobatic smoke trails in the vacuum of space?
overflow: hidden from the middle
Can't scroll to top of flex item that is overflowing containerWhy is a flex-child limited to parent size?CSS Centering with TransformCSS - Make divs align horizontallyHow to align a <div> to the middle (horizontally/width) of the pageAdding padding to HTML elements - IE, FF, Chrome etcCSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issueFluid width with equally spaced DIVsDynamic Stretch DIVHow do I add spacing between columns in Bootstrap?Prevent right div from dropping below when the left one is expandedDesign content of pageHow do I get an absolutely positioned div with overflow auto to grow to the width of it's contents with white-space set to nowrap?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
#main
white-space: nowrap;
overflow: hidden;
#main div
display: inline-block;
heighh: 200px;
width: 1000px;
border: solid black;
<div id="main">
<div id="first">
1
</div>
<div id="second">
2
</div id="third">
<div>
3
</div>
</div>I am trying to do something in my css code.
The code has 3 div objects, and the width of each one of them is 1000px.
I want those 3 divs to be in the same line, so i wrote that to the father div:
white-space: nowrap;
overflow: hidden;
In each one of them I entered:
display: inline-block;
The thing is they all cut to the right, but I want them to be cut from both right and left equally.
That means that if there is 10px overflow area, i want 5px to be cut to the right and 5px to the left.
How can I do that?
Many thanks,
Image of what I want to achieve:
html css
edited Mar 24 at 7:39
Anurag Srivastava
2,47621220
asked Mar 23 at 14:37
Ron RofeRon Rofe
113
add a comment |
#main
white-space: nowrap;
overflow: hidden;
#main div
display: inline-block;
heighh: 200px;
width: 1000px;
border: solid black;
<div id="main">
<div id="first">
1
</div>
<div id="second">
2
</div id="third">
<div>
3
</div>
</div>I am trying to do something in my css code.
The code has 3 div objects, and the width of each one of them is 1000px.
I want those 3 divs to be in the same line, so i wrote that to the father div:
white-space: nowrap;
overflow: hidden;
In each one of them I entered:
display: inline-block;
The thing is they all cut to the right, but I want them to be cut from both right and left equally.
That means that if there is 10px overflow area, i want 5px to be cut to the right and 5px to the left.
How can I do that?
Many thanks,
Image of what I want to achieve:
html css
edited Mar 24 at 7:39
Anurag Srivastava
2,47621220
asked Mar 23 at 14:37
Ron RofeRon Rofe
113
What do you mean with cut?
– Ifaruki
Mar 23 at 14:44
i.imgur.com/KV5wjwV.png the first one is the way it is looking right now the second is the desired result
– Ron Rofe
Mar 23 at 14:49
Add the complete code here. cannot see any output with the stuff you have added.
– Harshana
Mar 23 at 14:50
Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. See: How to create a Minimal, Complete, and Verifiable example.
– LGSon
Mar 23 at 14:55
#main white-space: nowrap; overflow: hidden; #main div display: inline-block; heighh: 200px; width: 1000px; border: solid black; <div id="main"> <div id="first"> 1 </div> <div id="second"> 2 </div id="third"> <div> 3 </div> </div>
– Ron Rofe
Mar 23 at 14:58
add a comment |
#main
white-space: nowrap;
overflow: hidden;
#main div
display: inline-block;
heighh: 200px;
width: 1000px;
border: solid black;
<div id="main">
<div id="first">
1
</div>
<div id="second">
2
</div id="third">
<div>
3
</div>
</div>I am trying to do something in my css code.
The code has 3 div objects, and the width of each one of them is 1000px.
I want those 3 divs to be in the same line, so i wrote that to the father div:
white-space: nowrap;
overflow: hidden;
In each one of them I entered:
display: inline-block;
The thing is they all cut to the right, but I want them to be cut from both right and left equally.
That means that if there is 10px overflow area, i want 5px to be cut to the right and 5px to the left.
How can I do that?
Many thanks,
Image of what I want to achieve:
html css
edited Mar 24 at 7:39
Anurag Srivastava
2,47621220
asked Mar 23 at 14:37
Ron RofeRon Rofe
113
#main
white-space: nowrap;
overflow: hidden;
#main div
display: inline-block;
heighh: 200px;
width: 1000px;
border: solid black;
<div id="main">
<div id="first">
1
</div>
<div id="second">
2
</div id="third">
<div>
3
</div>
</div>I am trying to do something in my css code.
The code has 3 div objects, and the width of each one of them is 1000px.
I want those 3 divs to be in the same line, so i wrote that to the father div:
white-space: nowrap;
overflow: hidden;
In each one of them I entered:
display: inline-block;
The thing is they all cut to the right, but I want them to be cut from both right and left equally.
That means that if there is 10px overflow area, i want 5px to be cut to the right and 5px to the left.
How can I do that?
Many thanks,
Image of what I want to achieve:
#main
white-space: nowrap;
overflow: hidden;
#main div
display: inline-block;
heighh: 200px;
width: 1000px;
border: solid black;
<div id="main">
<div id="first">
1
</div>
<div id="second">
2
</div id="third">
<div>
3
</div>
</div>#main
white-space: nowrap;
overflow: hidden;
#main div
display: inline-block;
heighh: 200px;
width: 1000px;
border: solid black;
<div id="main">
<div id="first">
1
</div>
<div id="second">
2
</div id="third">
<div>
3
</div>
</div>html css
html css
edited Mar 24 at 7:39
Anurag Srivastava
2,47621220
asked Mar 23 at 14:37
Ron RofeRon Rofe
113
edited Mar 24 at 7:39
Anurag Srivastava
2,47621220
asked Mar 23 at 14:37
Ron RofeRon Rofe
113
edited Mar 24 at 7:39
Anurag Srivastava
2,47621220
edited Mar 24 at 7:39
Anurag Srivastava
2,47621220
edited Mar 24 at 7:39
Anurag Srivastava
2,47621220
2,47621220
asked Mar 23 at 14:37
Ron RofeRon Rofe
113
asked Mar 23 at 14:37
Ron RofeRon Rofe
113
asked Mar 23 at 14:37
Ron RofeRon Rofe
113
113
What do you mean with cut?
– Ifaruki
Mar 23 at 14:44
i.imgur.com/KV5wjwV.png the first one is the way it is looking right now the second is the desired result
– Ron Rofe
Mar 23 at 14:49
Add the complete code here. cannot see any output with the stuff you have added.
– Harshana
Mar 23 at 14:50
Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. See: How to create a Minimal, Complete, and Verifiable example.
– LGSon
Mar 23 at 14:55
#main white-space: nowrap; overflow: hidden; #main div display: inline-block; heighh: 200px; width: 1000px; border: solid black; <div id="main"> <div id="first"> 1 </div> <div id="second"> 2 </div id="third"> <div> 3 </div> </div>
– Ron Rofe
Mar 23 at 14:58
add a comment |
What do you mean with cut?
– Ifaruki
Mar 23 at 14:44
i.imgur.com/KV5wjwV.png the first one is the way it is looking right now the second is the desired result
– Ron Rofe
Mar 23 at 14:49
Add the complete code here. cannot see any output with the stuff you have added.
– Harshana
Mar 23 at 14:50
Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. See: How to create a Minimal, Complete, and Verifiable example.
– LGSon
Mar 23 at 14:55
#main white-space: nowrap; overflow: hidden; #main div display: inline-block; heighh: 200px; width: 1000px; border: solid black; <div id="main"> <div id="first"> 1 </div> <div id="second"> 2 </div id="third"> <div> 3 </div> </div>
– Ron Rofe
Mar 23 at 14:58
What do you mean with cut?
– Ifaruki
Mar 23 at 14:44
What do you mean with cut?
– Ifaruki
Mar 23 at 14:44
i.imgur.com/KV5wjwV.png the first one is the way it is looking right now the second is the desired result
– Ron Rofe
Mar 23 at 14:49
i.imgur.com/KV5wjwV.png the first one is the way it is looking right now the second is the desired result
– Ron Rofe
Mar 23 at 14:49
Add the complete code here. cannot see any output with the stuff you have added.
– Harshana
Mar 23 at 14:50
Add the complete code here. cannot see any output with the stuff you have added.
– Harshana
Mar 23 at 14:50
Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. See: How to create a Minimal, Complete, and Verifiable example.
– LGSon
Mar 23 at 14:55
Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. See: How to create a Minimal, Complete, and Verifiable example.
– LGSon
Mar 23 at 14:55
#main white-space: nowrap; overflow: hidden; #main div display: inline-block; heighh: 200px; width: 1000px; border: solid black; <div id="main"> <div id="first"> 1 </div> <div id="second"> 2 </div id="third"> <div> 3 </div> </div>
– Ron Rofe
Mar 23 at 14:58
#main white-space: nowrap; overflow: hidden; #main div display: inline-block; heighh: 200px; width: 1000px; border: solid black; <div id="main"> <div id="first"> 1 </div> <div id="second"> 2 </div id="third"> <div> 3 </div> </div>
– Ron Rofe
Mar 23 at 14:58
add a comment |
3 Answers
3
active
oldest
votes
I believe you can use flexbox to achieve the effect you're looking for, though it's not particularly clean, and a bit advanced for a beginner.
Instead of putting all the children inside your #main, we put them in another container right inside #main that we'll call #wrapper. We use flexbox to put all its children (#first, #second, #third) on the same line, and we make this container arbitrarily wide (in this example, 9999px) so that all of the items will fit on the same line no matter what.
Then, we use position: absolute; left: 50%; transform: translateX(-50%); to center that container within #main. Applying overflow: hidden to #main as you already had gets you the cut-off effect you're looking for.
For more information about these techniques, check out A Complete Guide to Flexbox and This question about centering with transform and absolute positioning.
#main
overflow: hidden;
position: relative;
#wrapper
position: relative;
width: 9999px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
#wrapper div
height: 200px;
width: 400px;
border: solid black;
<div id="main">
<div id="wrapper">
<div id="first">
1
</div>
<div id="second">
2
</div>
<div id="third">
3
</div>
</div>
</div>answered Mar 23 at 15:18
Geo1088Geo1088
3151514
add a comment |
An easy solution without extra element is to simply make the container a flexbox one and center the elements:
#main
display: flex;
justify-content: center; /*center to have overflow from both side*/
overflow:hidden; /*hide the overflow*/
#main div
height: 200px;
width: 500px;
border: solid black;
flex-shrink:0; /* Don't shrink element so they overflow */
<div id="main">
<div id="first">
1
</div>
<div id="second">
2
</div>
<div id="third">
3
</div>
</div>Here is some related question to better understand what is happening:
Why is a flex-child limited to parent size?
Can't scroll to top of flex item that is overflowing container
answered Mar 23 at 22:57
Temani AfifTemani Afif
87.4k104998
add a comment |
on your case you have 3 div tags with a fixed width ,so it can be easily achieved by setting margin-left of it's parent .set margin-left:calc(50%-1500px); to your parent element it will work fine,
>
- 50% is half the width of the screen.
- here 1500px is 1.5 times of width of your child elements(1000px).
here I added an example to demonstrate with child width:300px;
#main
white-space: nowrap;
overflow: hidden;
margin-left:calc(50% - 450px);
#main div
display: inline-block;
height: 200px;
width: 300px;
border: solid black;
box-sizing:border-box;
<div id="main">
<div id="first">
1
</div>
<div id="second">
2
</div >
<div id="third">
3
</div>
</div>answered Mar 23 at 15:40
Dream Hunter - hashADHDream Hunter - hashADH
2,20911636
This isn't a perfect solution, because it doesn't account for border width or the width of the space between elements that you get fromdisplay: inline-block, though it's probably close enough for the asker's uses.
– Geo1088
Mar 23 at 16:20
@Geo1088 border width is not a matter here because I'm added box-sizing : border-box; and the space between the blocks can be easily managed by adjusting the margin left value,I give him the basic logic.
– Dream Hunter - hashADH
Mar 23 at 16:29
@Geo1088 assume if the margin between div tags are 10px then equation just change to margin-left:calc(50%-(1500px+20px));
– Dream Hunter - hashADH
Mar 23 at 16:30
Didn't notice thebox-sizing, good call. However, there is a space between them that's always there even if you setmargin: 0because of the way HTML whitespace is handled withdisplay: inline-block. There is an actual text node between each element, containing nothing but a space, unless you have no whitespace between the child tags in HTML. This is why I almost always use flexbox for this type of thing - it ignores whitespace in the markup.
– Geo1088
Mar 23 at 17:14
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
);
);
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%2f55314820%2foverflow-hidden-from-the-middle%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
I believe you can use flexbox to achieve the effect you're looking for, though it's not particularly clean, and a bit advanced for a beginner.
Instead of putting all the children inside your #main, we put them in another container right inside #main that we'll call #wrapper. We use flexbox to put all its children (#first, #second, #third) on the same line, and we make this container arbitrarily wide (in this example, 9999px) so that all of the items will fit on the same line no matter what.
Then, we use position: absolute; left: 50%; transform: translateX(-50%); to center that container within #main. Applying overflow: hidden to #main as you already had gets you the cut-off effect you're looking for.
For more information about these techniques, check out A Complete Guide to Flexbox and This question about centering with transform and absolute positioning.
#main
overflow: hidden;
position: relative;
#wrapper
position: relative;
width: 9999px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
#wrapper div
height: 200px;
width: 400px;
border: solid black;
<div id="main">
<div id="wrapper">
<div id="first">
1
</div>
<div id="second">
2
</div>
<div id="third">
3
</div>
</div>
</div>answered Mar 23 at 15:18
Geo1088Geo1088
3151514
add a comment |
I believe you can use flexbox to achieve the effect you're looking for, though it's not particularly clean, and a bit advanced for a beginner.
Instead of putting all the children inside your #main, we put them in another container right inside #main that we'll call #wrapper. We use flexbox to put all its children (#first, #second, #third) on the same line, and we make this container arbitrarily wide (in this example, 9999px) so that all of the items will fit on the same line no matter what.
Then, we use position: absolute; left: 50%; transform: translateX(-50%); to center that container within #main. Applying overflow: hidden to #main as you already had gets you the cut-off effect you're looking for.
For more information about these techniques, check out A Complete Guide to Flexbox and This question about centering with transform and absolute positioning.
#main
overflow: hidden;
position: relative;
#wrapper
position: relative;
width: 9999px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
#wrapper div
height: 200px;
width: 400px;
border: solid black;
<div id="main">
<div id="wrapper">
<div id="first">
1
</div>
<div id="second">
2
</div>
<div id="third">
3
</div>
</div>
</div>answered Mar 23 at 15:18
Geo1088Geo1088
3151514
add a comment |
I believe you can use flexbox to achieve the effect you're looking for, though it's not particularly clean, and a bit advanced for a beginner.
Instead of putting all the children inside your #main, we put them in another container right inside #main that we'll call #wrapper. We use flexbox to put all its children (#first, #second, #third) on the same line, and we make this container arbitrarily wide (in this example, 9999px) so that all of the items will fit on the same line no matter what.
Then, we use position: absolute; left: 50%; transform: translateX(-50%); to center that container within #main. Applying overflow: hidden to #main as you already had gets you the cut-off effect you're looking for.
For more information about these techniques, check out A Complete Guide to Flexbox and This question about centering with transform and absolute positioning.
#main
overflow: hidden;
position: relative;
#wrapper
position: relative;
width: 9999px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
#wrapper div
height: 200px;
width: 400px;
border: solid black;
<div id="main">
<div id="wrapper">
<div id="first">
1
</div>
<div id="second">
2
</div>
<div id="third">
3
</div>
</div>
</div>answered Mar 23 at 15:18
Geo1088Geo1088
3151514
I believe you can use flexbox to achieve the effect you're looking for, though it's not particularly clean, and a bit advanced for a beginner.
Instead of putting all the children inside your #main, we put them in another container right inside #main that we'll call #wrapper. We use flexbox to put all its children (#first, #second, #third) on the same line, and we make this container arbitrarily wide (in this example, 9999px) so that all of the items will fit on the same line no matter what.
Then, we use position: absolute; left: 50%; transform: translateX(-50%); to center that container within #main. Applying overflow: hidden to #main as you already had gets you the cut-off effect you're looking for.
For more information about these techniques, check out A Complete Guide to Flexbox and This question about centering with transform and absolute positioning.
#main
overflow: hidden;
position: relative;
#wrapper
position: relative;
width: 9999px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
#wrapper div
height: 200px;
width: 400px;
border: solid black;
<div id="main">
<div id="wrapper">
<div id="first">
1
</div>
<div id="second">
2
</div>
<div id="third">
3
</div>
</div>
</div>#main
overflow: hidden;
position: relative;
#wrapper
position: relative;
width: 9999px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
#wrapper div
height: 200px;
width: 400px;
border: solid black;
<div id="main">
<div id="wrapper">
<div id="first">
1
</div>
<div id="second">
2
</div>
<div id="third">
3
</div>
</div>
</div>#main
overflow: hidden;
position: relative;
#wrapper
position: relative;
width: 9999px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
#wrapper div
height: 200px;
width: 400px;
border: solid black;
<div id="main">
<div id="wrapper">
<div id="first">
1
</div>
<div id="second">
2
</div>
<div id="third">
3
</div>
</div>
</div>answered Mar 23 at 15:18
Geo1088Geo1088
3151514
edited Apr 5 at 0:11
answered Mar 23 at 15:18
Geo1088Geo1088
3151514
answered Mar 23 at 15:18
Geo1088Geo1088
3151514
answered Mar 23 at 15:18
Geo1088Geo1088
3151514
3151514
add a comment |
add a comment |
An easy solution without extra element is to simply make the container a flexbox one and center the elements:
#main
display: flex;
justify-content: center; /*center to have overflow from both side*/
overflow:hidden; /*hide the overflow*/
#main div
height: 200px;
width: 500px;
border: solid black;
flex-shrink:0; /* Don't shrink element so they overflow */
<div id="main">
<div id="first">
1
</div>
<div id="second">
2
</div>
<div id="third">
3
</div>
</div>Here is some related question to better understand what is happening:
Why is a flex-child limited to parent size?
Can't scroll to top of flex item that is overflowing container
answered Mar 23 at 22:57
Temani AfifTemani Afif
87.4k104998
add a comment |
An easy solution without extra element is to simply make the container a flexbox one and center the elements:
#main
display: flex;
justify-content: center; /*center to have overflow from both side*/
overflow:hidden; /*hide the overflow*/
#main div
height: 200px;
width: 500px;
border: solid black;
flex-shrink:0; /* Don't shrink element so they overflow */
<div id="main">
<div id="first">
1
</div>
<div id="second">
2
</div>
<div id="third">
3
</div>
</div>Here is some related question to better understand what is happening:
Why is a flex-child limited to parent size?
Can't scroll to top of flex item that is overflowing container
answered Mar 23 at 22:57
Temani AfifTemani Afif
87.4k104998
add a comment |
An easy solution without extra element is to simply make the container a flexbox one and center the elements:
#main
display: flex;
justify-content: center; /*center to have overflow from both side*/
overflow:hidden; /*hide the overflow*/
#main div
height: 200px;
width: 500px;
border: solid black;
flex-shrink:0; /* Don't shrink element so they overflow */
<div id="main">
<div id="first">
1
</div>
<div id="second">
2
</div>
<div id="third">
3
</div>
</div>Here is some related question to better understand what is happening:
Why is a flex-child limited to parent size?
Can't scroll to top of flex item that is overflowing container
answered Mar 23 at 22:57
Temani AfifTemani Afif
87.4k104998
An easy solution without extra element is to simply make the container a flexbox one and center the elements:
#main
display: flex;
justify-content: center; /*center to have overflow from both side*/
overflow:hidden; /*hide the overflow*/
#main div
height: 200px;
width: 500px;
border: solid black;
flex-shrink:0; /* Don't shrink element so they overflow */
<div id="main">
<div id="first">
1
</div>
<div id="second">
2
</div>
<div id="third">
3
</div>
</div>Here is some related question to better understand what is happening:
Why is a flex-child limited to parent size?
Can't scroll to top of flex item that is overflowing container
#main
display: flex;
justify-content: center; /*center to have overflow from both side*/
overflow:hidden; /*hide the overflow*/
#main div
height: 200px;
width: 500px;
border: solid black;
flex-shrink:0; /* Don't shrink element so they overflow */
<div id="main">
<div id="first">
1
</div>
<div id="second">
2
</div>
<div id="third">
3
</div>
</div>#main
display: flex;
justify-content: center; /*center to have overflow from both side*/
overflow:hidden; /*hide the overflow*/
#main div
height: 200px;
width: 500px;
border: solid black;
flex-shrink:0; /* Don't shrink element so they overflow */
<div id="main">
<div id="first">
1
</div>
<div id="second">
2
</div>
<div id="third">
3
</div>
</div>answered Mar 23 at 22:57
Temani AfifTemani Afif
87.4k104998
answered Mar 23 at 22:57
Temani AfifTemani Afif
87.4k104998
answered Mar 23 at 22:57
Temani AfifTemani Afif
87.4k104998
answered Mar 23 at 22:57
Temani AfifTemani Afif
87.4k104998
87.4k104998
add a comment |
add a comment |
on your case you have 3 div tags with a fixed width ,so it can be easily achieved by setting margin-left of it's parent .set margin-left:calc(50%-1500px); to your parent element it will work fine,
>
- 50% is half the width of the screen.
- here 1500px is 1.5 times of width of your child elements(1000px).
here I added an example to demonstrate with child width:300px;
#main
white-space: nowrap;
overflow: hidden;
margin-left:calc(50% - 450px);
#main div
display: inline-block;
height: 200px;
width: 300px;
border: solid black;
box-sizing:border-box;
<div id="main">
<div id="first">
1
</div>
<div id="second">
2
</div >
<div id="third">
3
</div>
</div>answered Mar 23 at 15:40
Dream Hunter - hashADHDream Hunter - hashADH
2,20911636
This isn't a perfect solution, because it doesn't account for border width or the width of the space between elements that you get fromdisplay: inline-block, though it's probably close enough for the asker's uses.
– Geo1088
Mar 23 at 16:20
@Geo1088 border width is not a matter here because I'm added box-sizing : border-box; and the space between the blocks can be easily managed by adjusting the margin left value,I give him the basic logic.
– Dream Hunter - hashADH
Mar 23 at 16:29
@Geo1088 assume if the margin between div tags are 10px then equation just change to margin-left:calc(50%-(1500px+20px));
– Dream Hunter - hashADH
Mar 23 at 16:30
Didn't notice thebox-sizing, good call. However, there is a space between them that's always there even if you setmargin: 0because of the way HTML whitespace is handled withdisplay: inline-block. There is an actual text node between each element, containing nothing but a space, unless you have no whitespace between the child tags in HTML. This is why I almost always use flexbox for this type of thing - it ignores whitespace in the markup.
– Geo1088
Mar 23 at 17:14
add a comment |
on your case you have 3 div tags with a fixed width ,so it can be easily achieved by setting margin-left of it's parent .set margin-left:calc(50%-1500px); to your parent element it will work fine,
>
- 50% is half the width of the screen.
- here 1500px is 1.5 times of width of your child elements(1000px).
here I added an example to demonstrate with child width:300px;
#main
white-space: nowrap;
overflow: hidden;
margin-left:calc(50% - 450px);
#main div
display: inline-block;
height: 200px;
width: 300px;
border: solid black;
box-sizing:border-box;
<div id="main">
<div id="first">
1
</div>
<div id="second">
2
</div >
<div id="third">
3
</div>
</div>answered Mar 23 at 15:40
Dream Hunter - hashADHDream Hunter - hashADH
2,20911636
This isn't a perfect solution, because it doesn't account for border width or the width of the space between elements that you get fromdisplay: inline-block, though it's probably close enough for the asker's uses.
– Geo1088
Mar 23 at 16:20
@Geo1088 border width is not a matter here because I'm added box-sizing : border-box; and the space between the blocks can be easily managed by adjusting the margin left value,I give him the basic logic.
– Dream Hunter - hashADH
Mar 23 at 16:29
@Geo1088 assume if the margin between div tags are 10px then equation just change to margin-left:calc(50%-(1500px+20px));
– Dream Hunter - hashADH
Mar 23 at 16:30
Didn't notice thebox-sizing, good call. However, there is a space between them that's always there even if you setmargin: 0because of the way HTML whitespace is handled withdisplay: inline-block. There is an actual text node between each element, containing nothing but a space, unless you have no whitespace between the child tags in HTML. This is why I almost always use flexbox for this type of thing - it ignores whitespace in the markup.
– Geo1088
Mar 23 at 17:14
add a comment |
on your case you have 3 div tags with a fixed width ,so it can be easily achieved by setting margin-left of it's parent .set margin-left:calc(50%-1500px); to your parent element it will work fine,
>
- 50% is half the width of the screen.
- here 1500px is 1.5 times of width of your child elements(1000px).
here I added an example to demonstrate with child width:300px;
#main
white-space: nowrap;
overflow: hidden;
margin-left:calc(50% - 450px);
#main div
display: inline-block;
height: 200px;
width: 300px;
border: solid black;
box-sizing:border-box;
<div id="main">
<div id="first">
1
</div>
<div id="second">
2
</div >
<div id="third">
3
</div>
</div>answered Mar 23 at 15:40
Dream Hunter - hashADHDream Hunter - hashADH
2,20911636
on your case you have 3 div tags with a fixed width ,so it can be easily achieved by setting margin-left of it's parent .set margin-left:calc(50%-1500px); to your parent element it will work fine,
>
- 50% is half the width of the screen.
- here 1500px is 1.5 times of width of your child elements(1000px).
here I added an example to demonstrate with child width:300px;
#main
white-space: nowrap;
overflow: hidden;
margin-left:calc(50% - 450px);
#main div
display: inline-block;
height: 200px;
width: 300px;
border: solid black;
box-sizing:border-box;
<div id="main">
<div id="first">
1
</div>
<div id="second">
2
</div >
<div id="third">
3
</div>
</div>#main
white-space: nowrap;
overflow: hidden;
margin-left:calc(50% - 450px);
#main div
display: inline-block;
height: 200px;
width: 300px;
border: solid black;
box-sizing:border-box;
<div id="main">
<div id="first">
1
</div>
<div id="second">
2
</div >
<div id="third">
3
</div>
</div>#main
white-space: nowrap;
overflow: hidden;
margin-left:calc(50% - 450px);
#main div
display: inline-block;
height: 200px;
width: 300px;
border: solid black;
box-sizing:border-box;
<div id="main">
<div id="first">
1
</div>
<div id="second">
2
</div >
<div id="third">
3
</div>
</div>answered Mar 23 at 15:40
Dream Hunter - hashADHDream Hunter - hashADH
2,20911636
edited Mar 24 at 5:03
answered Mar 23 at 15:40
Dream Hunter - hashADHDream Hunter - hashADH
2,20911636
answered Mar 23 at 15:40
Dream Hunter - hashADHDream Hunter - hashADH
2,20911636
answered Mar 23 at 15:40
Dream Hunter - hashADHDream Hunter - hashADH
2,20911636
2,20911636
This isn't a perfect solution, because it doesn't account for border width or the width of the space between elements that you get fromdisplay: inline-block, though it's probably close enough for the asker's uses.
– Geo1088
Mar 23 at 16:20
@Geo1088 border width is not a matter here because I'm added box-sizing : border-box; and the space between the blocks can be easily managed by adjusting the margin left value,I give him the basic logic.
– Dream Hunter - hashADH
Mar 23 at 16:29
@Geo1088 assume if the margin between div tags are 10px then equation just change to margin-left:calc(50%-(1500px+20px));
– Dream Hunter - hashADH
Mar 23 at 16:30
Didn't notice thebox-sizing, good call. However, there is a space between them that's always there even if you setmargin: 0because of the way HTML whitespace is handled withdisplay: inline-block. There is an actual text node between each element, containing nothing but a space, unless you have no whitespace between the child tags in HTML. This is why I almost always use flexbox for this type of thing - it ignores whitespace in the markup.
– Geo1088
Mar 23 at 17:14
add a comment |
This isn't a perfect solution, because it doesn't account for border width or the width of the space between elements that you get fromdisplay: inline-block, though it's probably close enough for the asker's uses.
– Geo1088
Mar 23 at 16:20
@Geo1088 border width is not a matter here because I'm added box-sizing : border-box; and the space between the blocks can be easily managed by adjusting the margin left value,I give him the basic logic.
– Dream Hunter - hashADH
Mar 23 at 16:29
@Geo1088 assume if the margin between div tags are 10px then equation just change to margin-left:calc(50%-(1500px+20px));
– Dream Hunter - hashADH
Mar 23 at 16:30
Didn't notice thebox-sizing, good call. However, there is a space between them that's always there even if you setmargin: 0because of the way HTML whitespace is handled withdisplay: inline-block. There is an actual text node between each element, containing nothing but a space, unless you have no whitespace between the child tags in HTML. This is why I almost always use flexbox for this type of thing - it ignores whitespace in the markup.
– Geo1088
Mar 23 at 17:14
This isn't a perfect solution, because it doesn't account for border width or the width of the space between elements that you get from
display: inline-block, though it's probably close enough for the asker's uses.– Geo1088
Mar 23 at 16:20
This isn't a perfect solution, because it doesn't account for border width or the width of the space between elements that you get from
display: inline-block, though it's probably close enough for the asker's uses.– Geo1088
Mar 23 at 16:20
@Geo1088 border width is not a matter here because I'm added box-sizing : border-box; and the space between the blocks can be easily managed by adjusting the margin left value,I give him the basic logic.
– Dream Hunter - hashADH
Mar 23 at 16:29
@Geo1088 border width is not a matter here because I'm added box-sizing : border-box; and the space between the blocks can be easily managed by adjusting the margin left value,I give him the basic logic.
– Dream Hunter - hashADH
Mar 23 at 16:29
@Geo1088 assume if the margin between div tags are 10px then equation just change to margin-left:calc(50%-(1500px+20px));
– Dream Hunter - hashADH
Mar 23 at 16:30
@Geo1088 assume if the margin between div tags are 10px then equation just change to margin-left:calc(50%-(1500px+20px));
– Dream Hunter - hashADH
Mar 23 at 16:30
Didn't notice the
box-sizing, good call. However, there is a space between them that's always there even if you set margin: 0 because of the way HTML whitespace is handled with display: inline-block. There is an actual text node between each element, containing nothing but a space, unless you have no whitespace between the child tags in HTML. This is why I almost always use flexbox for this type of thing - it ignores whitespace in the markup.– Geo1088
Mar 23 at 17:14
Didn't notice the
box-sizing, good call. However, there is a space between them that's always there even if you set margin: 0 because of the way HTML whitespace is handled with display: inline-block. There is an actual text node between each element, containing nothing but a space, unless you have no whitespace between the child tags in HTML. This is why I almost always use flexbox for this type of thing - it ignores whitespace in the markup.– Geo1088
Mar 23 at 17:14
add a comment |
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.
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%2f55314820%2foverflow-hidden-from-the-middle%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
What do you mean with cut?
– Ifaruki
Mar 23 at 14:44
i.imgur.com/KV5wjwV.png the first one is the way it is looking right now the second is the desired result
– Ron Rofe
Mar 23 at 14:49
Add the complete code here. cannot see any output with the stuff you have added.
– Harshana
Mar 23 at 14:50
Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. See: How to create a Minimal, Complete, and Verifiable example.
– LGSon
Mar 23 at 14:55
#main white-space: nowrap; overflow: hidden; #main div display: inline-block; heighh: 200px; width: 1000px; border: solid black; <div id="main"> <div id="first"> 1 </div> <div id="second"> 2 </div id="third"> <div> 3 </div> </div>
– Ron Rofe
Mar 23 at 14:58