I'm trying to place a button on bottom right corner of a div which is scrollable.
Since it is a content editable div, when content in the div increases, scollbar appears and button gets hidden behind the scrollbar on IE.
How to fix this issue?
I made an example for you.
Wrap all in a container, and position the bottom in the wrapper
main{
width:500px;
height:300px;
position:relative;
}
div{
background:#fff;
width:500px;
height:300px;
overflow-y:auto;
padding:10px 20px
}
button{
position:absolute;
bottom:0;
right:0;
}
https://jsfiddle.net/8f0Loem5/
hope this helps
Related
I'm having trouble to to style my layout like I want it to. I have a content area #content (the grey you can see in the example image) with a yellow element inside. This div is position:static;height:100%;. Now I have a #left-panel div also, with position:fixed;height:100%;. The problem is, if the content area has not enough space a horizontally scrollbar appears. This will be overlaped of the fixed div. For me it is all logically, but I don't know how to get around this. My scrollbar of the #content-element should be visible the whole width of the window. So it would not be a solution for me to just reduce the width of the content if the panel is in view.
The whole css:
#content{
width:100%;
height:100%;
background:grey;
}
#left-panel{
position:fixed;
top:0;
left:0;
width:300px;
height:100%;
overflow-y:auto;
}
Can somebody help me fixing this with pure CSS?
Fiddle: http://jsfiddle.net/a2wn8x5z/1/
Your wrapper element is position:fixed; I think that you are talking about a overlay with a navigation panel on the left. Well, I had a similar situation and found out, that you can't use position:fixed; if your parent element is also position:fixed;. This will overlap the scrollbar of the parent wrapper (the overlay).
So you have to use position:absolute; instead or use this open source plugin to remove the width/height of the scrollbar from your element:
Scrollbar Fixer
perhaps your problem is in this code here
<div style="width:110%;border-right:10px solid black;height:200px;background:yellow;"></div>
remove the width:110%; and it should be good to go.
Here's the Updated Fiddle
Edit
I think I misunderstand what's the problem before.
Because on your case, you use position: fixed; for #wrapper and #left-panel, and both use stlye left: 0, their position will overlap each other in left from the viewport, you basically need to position the left of #wrapper not to be in the same position as #left-panel, so you need to add this to #wrapper
left:200px; /* the width of #left-panel (if left panel has border, add it to this too )*/
right:0;
and remove
width:100%;
here's the Updated Fiddle
to make sure it's what you want, try change the style of the div inside #content to width:200%; and add margin:20px;
Edit Two
the cause for the scrollbar to overlap each other is because in the fiddle you use position: fixed for the #wrapper, thus will not create a scrollbar in the body, then you add overflow:auto in the #wrapper, causing the scrollbar to be created for the #wrapper and not the body, so you need to change the CSS for #wrapper to this
#wrapper{
background:gray;
}
I don't include the height because for the div, the height is based on the child inside it, so you couldn't see the gray background, except you add some padding to it.
here's the Working Fiddle
First of all, you don't have to add "position: static;" style into your div, because it's static by default. There are two ways to solve your problem:
Add "position: relative;" into #content selector and declare #content after #left-panel in your HTML.
<div id="left-panel"></div>
<div id="content"></div>
#content{
position: relative;
width:100%;
height:100%;
background:grey;
}
Codepen: http://codepen.io/anon/pen/yoHxl
Or add "position: relative; z-index: 1" (z-index of #content should be higher of #left-panel's) into #content selector.
<div id="content"></div>
<div id="left-panel"></div>
#content{
position: relative;
width:100%;
height:100%;
background:grey;
z-index: 1;
}
Codepen: http://codepen.io/anon/pen/HgwDx
Best,
Marek
so here's my problem. I have two divs, and i want to be able to see both of them when i scroll down the page. Both divs are in the same parent container. If i give the parent a position:fixed, the the bottom div get's cut off, because you have to scroll to see it's full height. So i tried this. I gave position:fixed to the top div, and position relative to the bottom one. The fixed one now scrools but the relative doesn't "follow it" or stay beneath it.
Any ideas?
If I understand you correctly, the answer is to position both divs absolutely within the fixed parent.
JSFiddle DEMO
HTML
<div class="parent">
<div class="topDiv"></div>
<div class="bottomDiv"></div>
</div
CSS
.parent {
height:1500px;
width:200px;
border:1px solid grey;
position: fixed;
}
.topDiv {
display:block;
background:silver;
width:100px;
height:100px;
position:absolute;
top:0;
left:0
}
.bottomDiv {
background:red;
width:100px;
height:100px;
position:absolute;
top:130px;
left:0
}
I have a div that is centered using margin: 0 auto; display: table;. The div is 960px wide.
There is another div inside this one. It is a search box and it is left-aligned in the top corner. But I would like this div to be left-aligned to the very left side of the browser window, meaning it would be visually outside or inside the main centered div depending on the browser window size. Is there a way to achieve this in CSS?
here a fiddle: http://jsfiddle.net/skunheal/5qT3p/
this would be the code:
#container{
margin: 0 auto;
display: table;
width:400px;
height:300px;
background:#111;
}
#searchbox{
position:absolute;
height:20px;
width:100px;
background:#f1f1f1;
left:0px;
top:0px;
}
hope this solves your problem
Just use position:absolute; left:0px; on the search box. See my jsfiddl (the container ID has shrunk so that it could fit in the JsFiddle window, but the concept should be sound): http://jsfiddle.net/CQ9cc/.
I have left div fixed, and right div scrollable. I have applied height:100% on the right div,but it doesn't work, i made background of the div yellow,and when i scroll it disappears, like it doesn't extend like it should.
Here is my code:
#levi{
width:25%;
height:100%;
background-color:#f98765;
position:fixed;
left:0;
float:left;
}
#desni{
background-color:yellow;
left:25%;
height:100%;
position:absolute;
left:value;
float:left;
}
One method is to set the background color of your right column on the <body> tag. That way, the background color will appear to always cover then entire height of the scroll area.
This is commonly known as "faux columns".
body {
background-color:yellow;
margin:0;
}
#levi {
width:25%;
height:100%;
background-color:#f98765;
position:fixed;
}
#desni {
position:absolute;
left:25%;
}
Working Example (jsFiddle)
Updated Working Example (with OPs posted HTML structure)
jsfiddle
How to make 2nd div streatch to all its vertical place. It has to 'take care' of bottom margin of div above him and bottom margin of all the page. How to make it fill all that place? There will be normal content inside it, I will make page that will be scrolling horizontally and I need it to fit in various user Y resolutions. Bottom margin will be constant. I would really like to avoid js in that.
http://jsfiddle.net/Jf5J8/2/
#rest {
background-color:blue;
height:100%;
position:relative;
top:0;left:0;
bottom:0;right:0;
}
html, body {
height:100%;
}
Your code
#rest {
background-color:blue;
height:100%;
position:relative;
top:0;
left:0;
bottom:0;
right:0;
height:auto;
}
contains two time height. Remove height:auto; in the end