I've just realized that in a div with overflow-x: scroll I have a horizontal scroll bar as expected but I also have some children elements that are outside the div.
I was expecting that the scroll bar would grow/shrink to accommodate more/less of that div children elements.
You can see this effect here (you need to inspect to see hidden elements) here, where element number 1 and 2 are hidden on the left of the parent div:
Fiddle
https://jsfiddle.net/w01y50yb/
Please note that I also have inline style.
Why is that and how to fix it?
Add a outer container to the content and apply overflow-x and width to it. Check this updated fiddle
<div style="width: 100%; overflow-x: scroll;">
<!-- You content here -->
</div>
Related
There are my codes. (jsfiddle)
Why this part of my codes isn't running?
header{background-color: #2bd5ec;}
I want to add background color to header tag. What i need to do?
The issue here is that since the elements inside your header are floated, they're considered in a different flow than your header, and thus it doesn't resize to fit them.
One way to fix this is to append <div style = "clear: both;"></div> to your header; little demo: little link.
You can also just add overflow: hidden; to your header: another little link, or float it as well: yet another little link.
you can set Height for Header.
for example :
header{background-color: red; height:100px;}
and you can use "clear" like this :
<header>
<div id="info">
<h1>Oyunn.in</h1>
</div>
<div id="categories">
<p>Barbie - Benten - Senten</p>
</div>
<br clear="all"/>
</header>
and css:
header{background-color: #2bd5ec;}
#info{float: left;}
#info h1{font-size: 100%;margin: 0;}
#categories{float: right;}
#categories p{margin:0;}
use overflow:hidden
header{background-color: #2bd5ec; overflow:hidden;}
The overflow CSS property specifies whether to clip content, render scroll bars or display overflow content of a block-level element.
Using the overflow property with a value different than visible, its default, will create a new block formatting context. This is technically necessary as if a float would intersect with the scrolling element it would force to rewrap the content of the scrollable element around intruding floats. The rewrap would happen after each scroll step and would be lead to a far too slow scrolling experience. Note that, by programmatically setting scrollTop to the relevant HTML element, even when overflow has the hidden value an element may need to scroll.
The overflow declaration tells the browser what to do with content that doesn't fit in a box. This assumes the box has a height: if it doesn't, it becomes as high as necessary to contain its contents, and the overflow declaration is useless.
SEE DEMO
Add
header{background-color: #2bd5ec;width:100%; height:30px;}
Background attribute usually needs div's dimensions
actually you didn't clear your child floats so whenever we are using float so we should clear the floats and we can give overflow: hidden; in our parent div to clearing the child floated div's.
header {
background-color: #2BD5EC;
overflow: hidden;
}
see the demo:- http://jsfiddle.net/vE8rd/17/
When I put a scrolling div (i.e. <div style="width:200;height:200;overflow-y:scroll;">) inside of another div that has an overflow attribute it treats the second div like I don't have dimensions set (height 200 and width 200). The scroll bar on the right shows up but it wont work because every time I add content the div just drops instead of making it scroll.
First divs css:
#slide1_container
{
width:976px;
height:520px;
overflow:hidden;
position:relative;
margin:0 auto;
}
Nested div:
overflow-y:scroll;
You're missing the px on the dimensions in your div's inline styles.
<div style="width:200;height:200;overflow-y:scroll;">
Should be
<div style="width:200px;height:200px;overflow-y:scroll;">
I have a fixed height scrollable <div id="overlay"> positioned over all the page elements using position:fixed. In the div I have elements higher than the fixed height, so the scrollbar appears. I also have a tooltip that I want to stay with a paragraph even if it is scrolled.
That's what I want to happen here, but unfortunately neither of my solutions work properly:
I add position:absolute to the tooltip and position:relative to #overlay(the tooltip's parent): http://jsfiddle.net/4qTke/
The tooltip scrolls as expected but it is not visible outside of #overlay.
I only add position:absolute to the tooltip: http://jsfiddle.net/Yp6Wf/
The tooltip is visible outside of the parent #overlay but doesn't move when the div is scrolled.
I want the tooltip to always be visible AND for it to move when scrolled.
What you want is not possible using just CSS and HTML.
The main problem you have is that you have set overflow: scroll on the container your #tooltip is relative to. Because this overflow property is stopping any content from appearing outside of its edges when you position #tooltip "outside" of the div it will be hidden and only visible when scrolled to.
The reason it was visible in your second scenario is because without setting position:relative your #tooltip was relative to the page and not the container. Which meant it was not affected by the overflow:scroll property of the container.
HTML:
<div id="overlay">
<div class="elemRel">
<div class="elemAbs">
<!-- Your Code -->
</div>
</div>
</div>
CSS:
#overlay { position:fixed; }
.elemRel { position:relative; }
.elemAbs { position:absolute; }
Maybe this is an alternative for you? See demo fiddle.
I am trying to use jQuery to calculate the window height then apply that value to a DIV (the container div) finally i want the jQuery to align an element to the bottom of the page.
<div id="wrapper">
<div id="element-align">Here is the element i wish to align to the bottom</div>
</div>
Further to my question on your OP, this can be done in CSS:
#element-align {
position: fixed;
bottom: 0;
}
If needs be you can also add left/right to the element, but the fixed positioning will mean that the element will always appear in the same place relative to the browser chrome, regardless of the scroll position of the page.
I have been trying to add a scroller to my context section that will only allow the box to scroll horizontally within the visible of the viewer's screen, not vertical.
Does anyone know any code to have scrollable content in a div in a fluid css layout design?
Also, here is a link to a website that has the exact scroll effect I am trying to recreate: http://patrickhoelck.com/home.html
Does anyone know any code to have scrollable content in a div in a fluid css layout design?
'overflow: auto' will add the scroll bar when necessary.
The trick is to make sure the content inside the scrollable element exceeds the normal width of the element, instead of simply reflowing onto a new row in which case it'll never trigger a scroll bar. One way to do this is by using 'white-space: nowrap'.
You probably want to take a look at overflow-x: scroll, which, along with setting a fixed size on the parent, will force a horizontal scrollbar if the content is too wide.
Some example html:
<div style="width: 50px; overflow-x: scroll">
<p>Hello world!</p>
<p>Here is a div with a horizontal scrollbar!</p>
</div>