I'm attempting to hide the vertical scrollbar of an image, while providing a horizontal one when necessary. The CSS I'm using is
style="overflow-x:auto; overflow-y:hidden;"
This is fine but I am running into an issue where the bottom part of the image is blocked by the horizontal scrollbar. Is there a way to add the bar 'beneath' the image?
Thanks
You can move your horizontal scrollbar with padding
#img_parent {
overflow-x:auto;
overflow-y:hidden;
padding-bottom: 10px;
}
Related
So basically upon resizing browser to smallest possible im still getting horizontal scroll bar for some reason. I cant have this for responsive purposes.
Any ideas?
http://www.techagesite.com/page-1work11122.htm
Another thing while im here
You will notice a email form and another div beside it with a border on it. When the browser shrinks the 2 divs collide and overlap.
Im still learning css and have tried sever approaches but nothing sticks.
Help would be greatly appreciated
The horizontal scroll bar is appearing because <ins class="adsbygoogle"> in the div #box6 has an inline width specified to 200px. To remove the horizontal scroll use the below css
#box6{
overflow:hidden;
}
EDIT: To get the desired effect as mentioned in the comment try the below css in media query for smaller screen.
The MailChimp form has width of 200px specified for its forms. This causes the right column to overlap the left section on re-sizing the window. So by setting width to the div container within the box6 and floating to left both the left and right divs will push the right section below when the screen doesn't have space to occupy both the divs side by side.
Also <ins class="adsbygoogle"> has a width of 200px given inline, so you can remove the width:45% specified for .right-column from your style sheet because this div will take the 200px width of its content.
#media only screen and (max-width: 480px) and (min-width: 321px){
#box6 .container{
width:200px;
float:left;
}
#box6 .right-column{
float:left;
}
}
Im working on a website template and i want to make photo on the top.
Well I used the position absolute then I set top to -50px and left to -50px.
It work perfectly but I have one issue the scroll bar appear on bottom.
This is the css for the div :
#moon {
background-image:url('img/moon.png');
width:289px;
height:289px;
position:absolute;
top:-150px;
left:-160px;
overflow:hidden;
}
Give the body overflow-x: hidden
Also notice that on small screens there will be no horizontal scrollbar(!), unless you'll handle it specifically with responsive CSS.
I have some text that I display in a div with the following CSS:
.fixed-box {
position:fixed;
top:10px;
width: 270px;
}
This is so that when I scroll it always shows on the top of the screen. However when there is a lot of text the div gets cut off, because the position:fixed prevents it from scrolling down with the page it's on.
I was going to switch to an iframe, but is this really the best way to go?
Add overflow:auto; and set height property either to 100% or manually.
Here is code example http://jsfiddle.net/7ZVb8/
I was trying out the on hover scroll bar style that is used in many places but ran into a problem. The appearance of the scroll bar on hovering causes text to jump which looks jarring.
#scroll {
width: 200px;
height: 200px;
overflow: hidden;
}
#scroll:hover {
overflow-y: scroll;
}
This Fiddle shows the jumping text on mouse hovering
Could I somehow prevent the jumping of text while keeping the appearance of scroll bar on hover?
just use <p> tag for your text like this:
http://jsfiddle.net/pdbYz/6/
UPDATE for firefox:
http://jsfiddle.net/pdbYz/19/
I propose to have another container within div#scroll with fixed, slightly smaller width.
This way your text won't 'jump' when scroll appears. Since scrollbars have different width on different OS (Windows, Mac, Linux) you should leave some free space to the right, where scrollbar appears.
Please see my fiddle here: http://jsfiddle.net/5RXSW/
To make containers more visible I've applied paddings and background colors. You can tweak these styles for your needs, but please reserve some pixels to the right of div#scroll for scrollbar.
You can change the width of the container on hover, so that when the scrollbar appears, it pushes outwards instead of inwards. This prevents the text from moving.
http://jsfiddle.net/pdbYz/3/
To achieve this I've added this line to your CSS:
#scroll:hover {
width: 360px;
}
My website
style css can be found here
I'm looking at my website on firefox, and I notice that the site is not stretching to the full width. You can tell by maximizing the page and then looking at the menu at the top right.
Also, there seems to be a horizontal scroll bar at all times which I don't need unless the site is showing the full content area in the middle.
Any suggestions on how I can fix?
To get rid of the horizontal scroll bar, try the following:
On DIV #master_wrapper remove:
float:left;
width:100%;
And add
overflow:hidden;
margin:0 auto;
On DIV #outer_wrapper remove:
float:left;
width:100%;
And add
overflow:hidden;
The site seems to go full width on Chrome ok.