I've a fixed side bar on the right side of the page (position: fixed)
But it's contents are not fully visible as it's not scrolling with the page scroll. I could have added overflow-y: scroll in the .sidebar{} css settings. But don't want a separate scroll bar for sidebar. Is there an option to make it scroll with the full page scroll.
Here is my css settings for sidebar :
.sidebar {
text-align: center;
padding: 2rem,1rem;
color: rgba(255,255,255,.5);
background-color: #202020;
top: 0;
bottom: 0;
}
If you want to debug to see what went wrong, here is it running live : https://pagefault.me
Thanks
Based on the answer I suggested in my comment, I was able to work in chrome to arrive at the css below.
1) Add some css to the .sidebar-nav component
nav.sidebar-nav {
position: absolute;
overflow-y: scroll;
top: 100px; /*100px to give some room for the sidebar heading (without this, absolute position will make the nav overlap)*/
left: 15px; /* you can make this zero and add `padding-left: 15px` */
bottom: 15px; /* leave some room for copyright section */
right: -17px; /*this may vary from browser to browser (i suggest using the width of the widest scrollbar, then adjust for padding-right)*/
padding-right: 15px; /*padding to prevent the text from flowing off screen*/
}
2) The .container class becomes
.sidebar .container{
max-width: 38rem;
padding-left: 1rem;
padding-right: 1rem;
margin-left: auto;
margin-right: auto;
height: 100%;
position: relative;
overflow: hidden;
}
3) Make sure the footer bit remains at the bottom after making .sidebar-nav absolute
.sidebar .container > p:last-of-type {
position: absolute;
bottom: -15px;
}
Of course as mentioned in the original solution, you have to test the scrollbar widths in different browsers to arrive at the right width to use in place of right: -17px in step 1.
Use absolute position instead of fixed as you want it to scroll it along with the page.
body {
margin: 0;
padding: 0;
position: relative;
}
main {
position: absolute;
top: 0;
left: 0;
width: 80%;
height: 300vh;
background: beige;
}
aside {
position: absolute;
top: 0;
right: 0;
width: 20%;
height: 300vh;
background: black;
color: white;
}
<main></main>
<aside><aside>
A flex box solution without positioning :
body {
margin: 0;
padding: 0;
display: flex;
}
main {
width: 80%;
height: 300vh;
background: beige;
}
aside {
width: 20%;
height: 300vh;
background: black;
color: white;
}
<main></main>
<aside></aside>
Related
I am creating content div's but they currently aren't visible because a sibling div is overriding it. How can i fix this?
<!-- language: lang-css -->
/* parent */
#game {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
/* sibling */
#screen {
display: block;
width: 100%;
height: 100%;
overflow: hidden
}
/* div currently not visible */
.tabcontent {
padding: 5px;
border: 1px solid #ccc;
border-top: none;
font-size: 20px;
width: 320px;
height: 515px;
background: #191919;
margin: 0 auto;
}
If you want a <div> being in front of another one, you have 2 solutions
In your HTML code, put the .tabcontent div after the #screen one, so it will appear in front
You can use the z-index CSS property (which also requires position) in order to fix the draw order (which div is in front of which one)
Example for the latter:
#screen {
position: relative; /* Needed by z-index but won't actually do anything */
z-index: 0;
}
.tabcontent {
position: relative;
z-index: 1;
}
A greater z-index means it will be in front of elements with a lower z-index.
Make the parent
#game {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: relative;
z-index: 1;
}
This should bring it to the front
Is it possible to move an absolute positioned div outside the parent's borders?
I tried (less) left:calc(~'0%-15px') but does not seem to work :)
.dif-links {
background: pink; width: 25px; height: 100px;
position: absolute; text-align: center;
left:calc(~'0%-15px')
}
I have an article and I would like to maintain the "share" div outisde the article body, this is why I used the absolute position, but now just move it to the left side of parent seems to be complicated...
Here is my pen
Assuming the parent is its containing block (e.g. has position: relative), the easiest way is
position: absolute;
right: 100%;
#wrapper {
position: relative;
background: yellow;
margin: 0 50px;
height: 50px;
}
#inner {
position: absolute;
right: 100%;
border: 2px solid red;
}
<div id="wrapper">
<div id="inner">Foo</div>
</div>
Just set a margin-left of -25px.
i have try like this please check,
.dif-links{
background: pink; width: 25px; height: 100px; position: absolute; text-align: center;left:-15px; top:0;}
.container {
width: #w;
height: calc(~'100% - '#h);
background: yellow;
margin: 0 auto;
border-collapse: collapse;
margin-top: #h;
position:relative;
}
The below css seems to work like you expected. I have not used calc() method but i am sure you can tweak it now to fit your need.
.dif-links {
background: pink;
width: 25px;
height: 100px;
position: absolute;
text-align: center;left:365px;
}
Hope this Helps!
Happy Styling.
I am trying to float my sidebar to the left and my slider to the right however, my images are out of the document flow.
Basically what I'm trying to do is when the user resizes the browser window, the images will shrink (which is why I am using max-width: 100%).
View in Chrome to see the issue
You can try using width : 100% for your main class like below.
.main {
position: relative;
float: right;
max-width: 600px;
margin: 0;
width: 100%;
}
EDIT:
You have edited your markup design. You have added a new content div to outside of your article div.
EDIT
#page-wrap {
max-width: 960px;
min-height: 100%;
height: auto !important;
padding-bottom: 40px;
margin: 0 auto;
position: relative;
}
#sidebar {
position: absolute;
width: 300px;
left: 0;
top: 130px;
}
.content {
max-width: 600px;
position: absolute;
left: 360px;
top: 130px;
right: 0;
}
If you change your classes this way, when the browser is resized, the image will be resized.
You can look at simple demo about this problem.
http://jsfiddle.net/qCQ9H/2/
I try <iframe> for the content and use position: fixed; for a music player player bar to keep it at the bottom of the page.
Demo: http://jsfiddle.net/ThinkingStiff/vhLeE/
HTML:
<iframe src="http://thinkingstiff.com"></iframe>
<div id="player">music player</div>
CSS:
body {
margin: 0;
height: 100%;
}
iframe {
border: 0;
display: block;
height: 100%;
width: 100%;
}
#player {
background-color: black;
bottom: 0;
color: white;
left: 0;
position: fixed;
height: 30px;
width: 100%;
}
Sadly this doesn't work well for IE or Firefix 9, it simply shows the content in a small height window: http://cl.ly/0y0T2I1R042c3G002H3y
how can I fix this ?
I've seen a similar problem before with things I've worked on, and fortunately the workaround is really simple -- IE and Firefox just need the html height to be set to 100% as well. So update the first element of your style to be:
html, body {
margin: 0;
height: 100%;
}
That should do the trick.
You should also consider dividing iframe and div heights in percentages. If you specify 100% for iframe, div might hide the scrollbars.
you may change it to
iframe {
border: 0;
display: block;
height: 97%;
width: 100%;
}
#player {
background-color: black;
bottom: 0;
color: white;
left: 0;
position: fixed;
height: 3%;
width: 100%;
}
http://jsfiddle.net/vhLeE/3/
For some reason the margin of my content area, 150px top isn't working in internet explorer so that the content is going underneath the header. any help? I know generally fixed is a bit weird in internet explorer, but weirdly this seems to be working, it's just the content is starting off at the top of the page rather than 150px down.
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
overflow-x: auto;
}
body {
background-color: #FBFBFB;
margin:0;
padding:0;
}
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 150px;
background-color: #FBFBFB;
z-index: 100;
}
#sidebar {
position: fixed;
top: 150px;
left: 0;
width: 275px;
height: 100%;
z-index: 100;
}
#content {
width: 837px;
margin-top: 150px;
margin-left: 325px;
overflow: auto;
}
Do you have a link that we can check?
Try "padding-top: 150px" instead, that mostly works unless there is something preventing you from doing that. Otherwise, try the regular tricks with "zoom: 1", "display: block", "position: relative" if they are applicable.