I'm trying to center an absolute div and at the same time also set the width of this div, but apparently only one these two things is possible at the same time. I've managed to center the absolute div rather painlessly, but setting a min-width adds this useless horizontal scrollbar for no reason: https://jsfiddle.net/pietertje1/ze7472ge/
The weird thing is, if I stretch the div to its desired width by adding in a single line of characters, it behaves perfectly.
anyone any idea how to fix this?
It looks like your min-width rule is causing this. Expand your fiddle output window and you'll see it go away. If you need that min-width you can target elements and apply overflow rules to them. For example
body {
overflow-x: hidden;
}
JSFiddle Link - your example with this rule
Edit
Per discussion, if you simply wish to center an element, apply the following margin rule
margin : 0 auto;
Updated JSFiddle
Related
Here's the codesandbox, as the code is too much to post here, given the nested elements.
I'd like to have:
a horizontal scroll for the .content div.
a vertical scroll just for the .group-body div.
I've tried everything and I can't get it to work.
This rule does make it "work", but I feel like it's not optimal.
.body{
height: 90vh;
}
You just need to specify max-height for .group-body and then overflow-y will work as expected.
See this fix in your code
This should solve your problem - https://codesandbox.io/s/divine-dawn-1n8b1.
It uses a flexbox instead of grid layout.
Note: The code in the link was fixed after a comment pointed out an issue. To fix the scrolling, I set the parent elements that contain the sidebar and the content to overflow:hidden, and set the parent element to overflow:auto, which allowed for the scroll bars to be contained in the content div.
I have a div, .instagram_grid which has margin-left and margin-right set to auto, is relatively positioned, and has a width which for browse sizes 900px >makes the div be centered nicely in the page.
when I have the simple structure in the context of the rest of the CSS for a single page, the no longer becomes centered at browser width >1684px. In the Fiddle that follows I only have two lines that modify the div as a whole (and one just sets the background to pink). There are no media queries present, which suggests that it is the effect of some unseen preceding div/element causing the behavior.
https://jsfiddle.net/ebbnormal/m561tpnL/6/
The behaviour is what is expected with that markup.
The element is centered, but then you use relative positioning to show it 500px to the right of where it actually would be.
The .calc-text div above the .instagram_grid div causes its parent to overflow by setting margin-left:auto while simultaneously setting left: to a negative value, which isn't valid CSS.
I'm designing a fullscreen website, using javascript to set the height and the width of my sections.
I'd like to have, at the bottom of each section, a diagonal separator.
Now, here's my issue:
In order to display the diagonal divs, i need to have overflow set to auto on the container, but if it is auto, the full website scroll to the right as the diagonal div is bigger than the body.
I need the container to have an overflow:hidden, but still be able to see the diagonal dividers.
You can see what i'm talking about here:
http://codepen.io/anon/pen/emoLpd
If you uncomment out //overflow:hidden from div.website-section you will see that the diagonal is not visible anymore.
How can i have the overflow hidden and the diagonal divs displayed at the same time?
Thanks in advance for any help.
PS: sorry for the tons of code, but i'm developing using less and i pasted the full code.
Here's a working example, forked from your example: http://codepen.io/anon/pen/jERvrE
No need to set overflow:hidden on the .website-section divs. You can simply set overflow-x: hidden on the body element, which keeps horizontal scrollbars from appearing but leaves vertical scrolling unmodified.
This is the important part:
body {
overflow-y: auto;
overflow-x: hidden;
}
I know this is very simple, but i've been struggling for a while and I just can't make it work. I thought someone here might be able to give me a quick answer.
I'm trying to make a div float and align with another div. I'm trying by changing the float and display css attributes but with no luck.
I've set up a jsFiddle: jsFiddle
Thanks in advance
Here: jsfiddle
I just changed the height of the div for the example to appear better but you can set it back to your heights for your site.
I'd set the margin-top on the whole container div so that you only define that property once instead of setting it for both the menu and the content separately: anytime you're defining a value twice, you should try to put a wrapper and define it only once.
Your code works well if the screen is wide enough. Only if it's not the #content gets pushed under the submenu. To fix that give your #container a width that can accomodate both - http://jsfiddle.net/zaRqz/11/
#container {
width: 1040px;
overflow: hidden;
}
In my CSS file I use this:
html,body{height:100%;padding:0;margin:0;border:0;}
Which causes a vertical scrollbar to appear on IE8, Chrome 5 and Mozilla 3.6, all latest version.
Also, the document is empty, it only has the html, head and body tags so nothing is going out of screen to cause that.
Setting overflow:hidden; on the html element will completly stop scrolling on the page.
How can I make it go away please but also keep scrolling when content is higher than display height?
Thank you.
I need 100% height in a XHTML document so that I can have div elements with 100%.
Anyway, I found the answer:
This problem only occurs when the top most element has a top margin.
It seems that that top margin gets added to the 100% height making it higher and causing the scrollbar.
So either use padding-top to space the top most element or use a with no top margin between the tag and the next element with a top margin.
overflow:hidden should help and prevent the display of scroll bars (you'll likely lose ~1px of content due to rounding errors
There may be better ways but I simply default to 98% which seems to obviate scrollbars in all browsers.
you could also set the height using JavaScript but that feels a little hacky
I ran into this issue today and found the scroll bar wasn't caused by a top margin on the first element, but by having BOTH the html and body elements have a height of 100%.
So, using this CSS rule:
html,body { height: 100%; }
I get scroll bars. If I change that to this CSS rule:
html { height: 100%; }
I get no scroll bars.
Peace...
The vertical scrollbar is coming because of height:100%. You don't need that unless there is a reason for you to use that.
Why are you setting 100% height in body?
It will get this height by default.
It makes sense to set height in body only if you want to set a numeric height in px such as lets say 600px