http://jsfiddle.net/BCTF9/
I have set the overflow as I want to restrict the height of the boxes and have a scroll show up when needed; so I added overflow-y: auto; as that generally does the trick. But now I see horizontal scroll bars on the second box in the example as well, though I'm not sure why?
I tried adding overflow-x: visible; but it didn't work. I don't want to set any widths on these boxes as they just need to be the width of the content + some padding.
You will also see the vertical scroll bars start too soon and don't allow the padding needed.
What can I do here?
jsfiddle Demo
Two reasons and fixes
The content in the second div taking too much width causing horizontal overflow, so increase the width
Instead of overflow-x:visible try overflow-x:hidden to hide horizontal scrollbar even if the width is higher
Try with this
CSS
.cat_list{ height:200px;
background:#e4e4e4;
width:200px;
overflow:hidden;
overflow-y:scroll;
overflow-x:hidden;}
HTML
<div class="cat_list"></div>
The scroll bars are appearing because there are many items in second div.
Try to remove these items, and they'll go away.
Fiddle
.cat_list {
overflow-y: auto;
overflow-x: hidden;
min-width: 200px;
padding: 10px;
}
Replace it
Related
I have a problem with content from a div, for example if I put a table inside of a div and set a width (width:200px !important)for that div the table it will overwrite that div. So how is possible to keep all content inside that div?
fiddle example:
http://jsfiddle.net/ebG9N/45/
You set the header to white-space: nowrap; therefore, the browser is unable to break the headers, so the width of the table will be bigger than the container div.
You can set, overflow: hidden; to cut the overflowing parts, or overflow: auto; to create a scrollbar, but without them it's the correct rendering.
There are two solutions.
i) IF you want to STRICTLY contain table WITHIN div then overflow:auto; is the way to go.
ii) BUT if you change your mind and want to WRAP div to the width of table then.
display:table; is the way to go.
Generally its bad idea to contain wider element within explicitly known less wider element.
Try using overflow:auto; in the css of the div.
You can't just expect it to somehow fit within a div of any size you wish. What you can do is, at least allow the browser to scroll (overflow: scroll) it using:
div.divano{
width:200px !important;
border:2px solid yellow;
background:#eaeaea;
height:200px;
overflow: scroll;
}
You may also use oveflow: hidden, but it would just hide the parts that are not visible. Also, overflow: scroll, will always show a scroll bar (with or without clipping). You can use overflow: auto to specify that the content should be scrolled only if clipping occurs.
Having trouble with a horizontal scroll bar that pops up.
My page is set up like so:
<html>
<head></head>
<body>
<article>
</article>
</body>
</html>
My css
article {
width:100%;
margin:0px auto;
padding:25px;
}
I'm also using Yahoo's Reset CSS. The trouble is the 100% on Article is giving me a horizontal scroll that I can't get rid of. I want it to stretch the length of the window with just a bit of space on the right and left.
The width property sets the width of the content, excluding padding, so the total width required by the element is all of the available width plus 2 times 25px.
Omit width: 100% (so that the default width: auto will be used).
This worked for me, I was having the same problem only in Firefox
body {
overflow-y: auto;
overflow-x: hidden;
}
100% Width + 25px padding = container.width+25px. Just add article { overflow-x:hidden } and it should hide it.
I got a div which is of fixed width and height:
#containersimg
{
width: 900px;
height: 135px;
}
And I have many images inside, with width 90px and height 120px. So i want to have my images all in a row, and show only horizontal scroll bar to scroll through the images.
I need to make this work in both FF and IE8 and above. I tried the overflow-x and overflow-y but I didn't helped.
Any idea?? Hope can get some help here... thanks...
You need a wrapping div inside your scrolling container to ensure that they are not constrained by width and then set overflow-x: scroll on the container. I've mocked up a quick fiddle to demonstrate. http://jsfiddle.net/vUEYG/
Give this a go :)
-ms-overflow-x: hidden;
Taken from this great resource CSS div element - how to show horizontal scroll bars only?
you can add first overflow:auto
#containersimg
{
width: 900px;
height: 135px;
overflow:auto;
overflow-x:hidden;
}
may help you
Please take a look at the following fiddle:
http://jsfiddle.net/ellenchristine/tty3e/
Note that when you expand or contract the Results panel, the jQuery Masonry plugin populates the new space with images. However, I'm having trouble with the footer area...when you scroll to the very bottom, the last image is always partially hidden behind the fixed footer. I've tried adding margins on the footer, on the wrapper, everything, but am not getting anywhere. Anyone see what I'm doing wrong?
If you remove the height settings you had on #wrapper, and set a bottom padding, it appears to function as you need. The height 100% was taking up 100% of the parent, since all the elements within #wrapper were floated, and that was just the height of the display window. If you want to see that in action, put a border on #wrapper before removing the height to see the problem.
#wrapper {
width:960px;
min-height: 100%;
padding: 15px 0 115px;
margin: 0 auto;
}
http://jsfiddle.net/tty3e/8/
try overflow:hidden on #wrapper
Ok so I have a div that contains a few forms that have dynamically generated content. There are categories, that if you click on, slide/toggle down to reveal that categories sub-contents, or projects. Right now, I have it setup so that if the height of the div expands to exceed a set amount, a scroll bar shows up at the side, and the user can scroll down and see the content.
NOW I am being asked to get rid of the scroll bar, and just have the div's border (which is just 1px set in the css) height adjust dynamically with the height of the div's content...can I even do that? Is there some sort of jquery animation that would allow that? A point in the right direction would be greatly appreciated!! Thanks
You now probably have a height set on the container div:
#container {
height: xxpx;
overflow: scroll;
}
Just change that to a min-height:
#container {
min-height: xxpx;
overflow: visible;
}
The div will be at least xx pixels, and grow to fit after that.