Page is here
I am using a sticky footer, which works fine everywhere but my portfolio page. The gallery is relatively positioned, and is overflowing from it's parent div. The footer is sticking to the bottom of the parent, rather than the page.
Help? Preferably in a way where I don't have to rewrite all my code?
Please try this one i hope it will helpful to you.
html, body {
height: 100%;
}
header {
background: #fff;
position: relative;
z-index: 100;
}
.content2 {
clear: both;
margin: 0 auto;
padding: 0;
text-align: center;
width: 70%;
}
.gallery {
display: table;
height: 100%;
margin-left: auto;
margin-right: auto;
margin-top: auto;
position: relative;
width: 100%;
}
#footer-block {
bottom: 0;
position: fixed;
width: 100%;
}
Thanks
Fixed it by coding body and html to 110% height, footer wrapper to 100% height, and adding page wrapper with 100% height.
Related
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>
For some reason my fixed div at the top of my website decided to ignore my wrapper and go the right.
This is the CSS code of both my fixed div and my wrapper:
div.colorChanger {
background-color: #0f4a1d;
padding: 0.5%;
position: fixed;
width: 100%;
z-index: 1;}
#wrapper {
width: 1000px;
margin: -10px auto;
background-color: #78ad00;}
And here's what it looks like.
Ok, looks like your.colorChanger is overflowing outside your wrapper. Just use overflow: hidden.
Here's what that CSS would look like:
#wrapper {
width:1000px;
margin: -10px auto;
background-color: #78ad00;
overflow:hidden; }
EDIT: Fixed position
I noticed you're using a position: fixed on the .colorChanger. Overflow doesn't apply to elements with a fixed position, so maybe you could just change it to position: absolute instead.
Your code should look like:
div.colorChanger {
background-color: #0f4a1d;
padding: 0.5%;
position: absolute; // not 'fixed'
width: 100%;
z-index: 1;}
#wrapper {
width: 1000px;
margin: -10px auto;
background-color: #78ad00;
position: relative;
overflow: hidden; }
An alternative, fixed width
Like I said, overflow: hidden doesn't apply to fixed elements. The alternative is to just use fixed width:
div.colorChanger {
...
width: 1000px;
box-sizing: border-box; }
I need the div to be in the center of the page at all times whether user resizes webpage or not.
I have tried using:
margin: auto;
margin: 0 auto;
margin-left: auto; margin-right auto;
but neither of those three worked.
HTML:
<div id="grayinnerbackground">
</div>
CSS:
div#grayinnerbackground {
margin: auto;
width:1000px;
background-color: #D9D9D9;
height: 100%;
position: fixed;
z-index: -1;
}
Here is a fiddle for an example of what I'm talking about.
http://jsfiddle.net/ymvDJ/
Thanks.
If you do want the position to be fixed, add these rules and drop the usual margin trick:
left: 50%;
margin-left: -25px; // half the width of your element
See it here: http://jsfiddle.net/8DfnG/2/
You can use
position: fixed;
left: 50%;
width: 50px;
margin-left: -25px; /* width รท 2 */
Demo: http://jsfiddle.net/ymvDJ/3/
Use:
position: relative
If that still doesn't work you may need to add this as well:
display: block;
"position: fixed" means that no matter what it stays at a x and y coordinate.
You can try this
div#grayinnerbackground {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
width: 50px;
background-color: #D9D9D9;
height: 100%;
}
http://jsfiddle.net/g49Mb/
More about the working here: http://codepen.io/shshaw/full/gEiDt
This this HTML:
<div id="grayinnerbackground">
foo
</div>
CSS:
div#grayinnerbackground {
margin: auto;
width: 50px;
background-color: #ccc;
height: 100%;
}
I'm not entirely sure why it didn't work until I put text into the div, checking something now.
UPDATE
Sigh, ok, i'm tired. If the div is empty, and you have a height of 100%, it is going to be 100% the height of its parent, the <body> in this case. Since there is no other content, the <body> has a height of 0. Give the <div> an absolute height, and it will pop in:
div#grayinnerbackground {
margin: auto;
width: 50px;
background-color: #ccc;
height: 10px;
}
Remove position: fixed, change the width to 50px and make sure you have a 0 before auto in margin: auto.
Update:
To have the div be as high as the window, be sure to set the body and html to height: 100%; too:
body, html {
height: 100%:
}
Updated jsfiddle again
I am trying to get my footer to be at bottom of page, header at top of page and section in the middle of page. But all I get is the red footer displayed on top of page. The background wrapper should be gray but that doesn't work either. Please help. Thank you.
Here is the css:
body {
margin: 0 auto;
}
#wrapper {
position: relative;
background-color: gray;
height: 100%;
width: 100%;
}
header {
position: absolute;
top:0;
width: 100%;
height: 20px;
background-color: red;
}
section {
position: absolute;
width: 100%;
height: 100px;
margin-top: auto;
margin-bottom: auto;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
background-color: blue;
}
below is the body of the html:
<body>
<div id="wrapper">
<header>
</header>
<section>
</section>
<footer>
</footer>
</div>
</body>
Just add this to html/body:
html, body {
height: 100%;
}
You should have to use position: absolute;. It tends to mess up all of your spacing when used in parent elements like that. The section section will be placed right over the header section because it hasn't been positioned at all.
Try just giving the section a min height and removing the position attributes.
Hope this helps.
You were close. Replace the CSS definition for <body>:
html, body{
margin: 0 auto;
width: 100%;
height: 100%;
}
make this in following class in your code :
html {
height: 100%;
}
body{
margin: 0 auto;
height: 100%;
}
section{
position: absolute;
width: 100%;
height: 100px;
top:20px;
}
DEMO
Remove the position absolute from the header, footer and section. I think it might be it.
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/