I have some weird CSS issue that I’m having the worst time locating. Something on the page (or in the css) is causing the page to allow for horizontal scrolling. I’ve tried pulling off individual sections of the site and it’s always there. Any ideas what it is?
here is a link to the dev http://phiaconcepts.devlocation.site
it looks like your problem is with the overflow property.
Add this property to the body tag:
overflow-y: hidden;
For more info look at https://css-tricks.com/almanac/properties/o/overflow/
This is happening because something on your page is wider than the screen width. I would go through different larger HTML elements on the page and see which one solves the issue when deleted. When located, you will want to check the width of the parent and its children, especially checking for margins and padding that might make it too large.
[box-sizing: border-box] (https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) might be useful to keep the children in the parent container.
Adding overflow-x: hidden to one of the parent containers will also give a hacky fix, but that will be hiding part of the design.
Related
Code sandbox: Code sandbox
I have a column of Icon like this:
I css it with overflow-x:auto so that It can scroll the icon outside the container.
But when It bounced out. The overflow-y: visible didn't work for me so the Icon is still inside the box.
I tried using oveflow-y but didn't work for me. I coded a code sandbox so that you guys can have a look. Thanks for all of your help! Have a nice day!
For overflow-y to work, the height of the content in the element needs to exceed the specified height.
I just removed the height of container and slightly increased the padding of AppBar to make it work. Yes, you have to little workaround to meet the height of the container actual to the design.
Another solution, for now, I can suggest is to play with z-index property of the elements.
SanBox
from mozilla : "Setting one axis to visible (the default) while setting the other to a different value results in visible behaving as auto."
source : https://developer.mozilla.org/en-US/docs/Web/CSS/overflow...
You could avoid this side effect either by controlling the scroll another way (css and javascript driven scrollbar) (this would by the way avoid the different scrollbars on some browser which can be a little ugly (ie under edge), either by setting the container bigger, and setting a nested element for the background.
I have 3 separate graphical elements; the header, the footer, and the content-background. The content background is repeatable, and my intention is to allow the page to dynamically adjust without breaking any flow of the page. I've tried to achieve this by applying the 'header image' to a div at the top of the page - the 'content-background' to the container (of both the content area and the menu), and finally the 'footer image' at the bottom of the page - outside of the container.
It seems to work well when I have very limited content on the page - however, the moment I put a of content in the content area, it just hangs out over the edge of the images and looks awful, as opposed to repeating the background and nudging the other divs down.
I don't want to introduce overflow:scroll, or anything like such - and I'm desperate to try and avoid JavaScript. I'm sure I've made a flaw somewhere in my thinking, but I'm not too sure where. I have a feeling that I need to do something regarding positioning - and changing the heights of certain divs (container, content are still defined as the base; but whatever I set it at, it either has no effect or causes the page to look bizarre).
Instead of copying-pasting the walls of texts, I've posted the address to a temporary section on my website.
It seems like you have a few issues. Setting a height on #container is a problem, and not clearing your floats of your #content and #rightbar elements is another problem. My belief is that fixing both of those things will give you the result you're expecting.
From what I understand from your question, you want your div tags to become bigger as the text gets more and more.
The solution is simple: Use min-width instead of width. it will adjust itself
I'm sort of new at Web Design, I'm getting there, though. But I'm still having trouble with elastic layouts and floats. I think that's where my problem with this page lies but I'm too inexperienced to understand it.
Here's my problems illustrated:
https://img.skitch.com/20120327-nwrm3t1u8cwppnwnegw8f2q7st.jpg
Here's a fiddle with my code:
http://jsfiddle.net/C3Dw2/1/
This is what it SHOULD look like:
http://img.photobucket.com/albums/v410/justice4all_quiet/register_13.jpg
I also want to have the right scrolling section fit in it's parent div. Right now, it's flowing out of it.
Ugh.
Any help would be awesome.
EDIT
The only issue remaining now is the icons not staying in their parent divs.
http://jsfiddle.net/xehMG/2/
See the fiddle for code and demo:
Fiddle: http://jsfiddle.net/C3Dw2/4
Demo: http://jsfiddle.net/C3Dw2/4/embedded/result/
see screen shot for output:
Set min-height on each of the elements that u've given height and width in percentage.Percentage will be effective only when the resolution is big enf to encompass ur children elements.
If you want to use percentages - note the min-width required for their children and set that min-width for its parent.Also use overflow:hidden|scroll|auto as a fall back to control the overflow of the children out of its parent.
I'm trying to do something like the min-height hack, but I have two floats that seem to be conflicting with it:
http://jsfiddle.net/redconservatory/vqFVU/1/
My "innercontainer" div is very short, I would like it take up as much as as possible (or at least, more space) without setting the height in pixels because my page content changes from page to page...
set overflow:auto instead of visible, so that .innercontainer expands to accommodate its contents.
demo at http://jsfiddle.net/gaby/vqFVU/2/
If you want a sticky footer as well look at http://www.cssstickyfooter.com/
http://jsfiddle.net/vqFVU/4/
javascript is the easiest way. You cant do that with pure CSS since every client can have a different size window.
I'm trying to get my contact form to not spill its contents out of the parent div when I resize the viewport. How can I go about doing this? I have used float clearing to prevent this as I understood it was supposed to be used, but it isn't working.
What should I do to fix this?
here is the page in question.
also I have a similar problem with the header.. the menu drops below the header text if I make the browser window smaller.
Thanks for any help you all have to offer.
http://countercharge.net/catsite/index.php?P=contact
On quick look, I would do either of these two things in your case:
Option 1:
Set a "min-width" for the #contact container. This would prevent it from becoming smaller than the table inside it when re-sized, but keep it's fluidity.
Option 2:
Remove any floats from the form table and ensure that the table has a "min-width" or any fixed width. Given that you're using a table-cell approach (which I personally also like for forms), there shouldn't be a need to float any table elements. The resizing of the parent container would then stop at the form fields.
Hope that helps.