http://jsfiddle.net/talmuda3/s9QyR/
footer {
margin-top: 1em;
width: 100%;
height: 20em;
position: relative;
bottom: 0;
left: 0;
}
The layout of an offline website is tricky. The content overflows into the footer.
Part of the code is as above.
How can the content be adjusted so the footer remains at the bottom, and the content stretches across the site without overlapping the footer. Please be gentle. Checked Chris Coyier's site for any tips - might just have missed something. Can anyone help?
You're pushing the article down with the top: 12em declaration. You should give the footer the same property, which fixes the issue: http://jsfiddle.net/s9QyR/1/
you should also push footer top:12em; that will add footer in right position. demo
I think this is what you're after - jsFiddle
article {
margin-top:12em;
width:80%;
height:100%;
margin-left: auto;
margin-right: auto;
margin-bottom: 3em;
padding: 1em;
z-index: 2;
background: transparent;
overflow: visible;
}
footer {
margin-top: 1em;
width: 100%;
height: 20em;
}
It seems that changing the positioning broke the natural flow of your elements.
You may want to try this method to avoid having to position everything down the line.
Related
http://jsfiddle.net/leongaban/6rd2hhpq/8/
I'm working with a fixed position div and making elements scrollable from inside it. Similar to this problem here.
I was able to get the scrollbars to show up, my problem is that I have a fixed header, and my fixed sidebar has to be pushed down in my view.
This allows the user to keep scrolling past the browser window so you lose sight of the scroller.
Is there anyway to keep the scrollbar in view with my example?
So that when the scroller hits and stops at the bottom of the view, you also see the last item.
.red-box {
position: fixed;
width: 100%;
height: 40px;
color: white;
background: red;
}
.sidebar {
position: fixed;
top: 60px;
overflow-y: auto;
margin-left: 20px;
width: 180px;
height: 100%;
}
If I understand the issue correctly - you want the fixed element to fill the screen apart from the header height... then you could try :
.not-stuck {
height: calc(100% - 60px);
}
Looking at the other solutions on the page that was linked to, my personal second choice would be to use JavaScript (but the question doesn't have that tag of course).
I changed the height to 90% and it seemed to work:
.not-stuck {
position: fixed;
top: 60px;
overflow-y: auto;
margin-left: 200px;
width: 180px;
height: 90%;
}
I want to make a div (my sidebar) stretch to the bottom of the page. I know that I need to add "height: 100%;" in order to do that.
But when I add height: 100%;, pages that have less content than the sidebar cuts the sidebar's height and then you can't see the sidebar content.
This is the index page . Everything looks exactly the way I want it to.
This is a sample page . Notice that the sidebar has been cut.
CSS:
#menu-container {
background-image: url('floral.png');
width: 300px;
display: inline-block;
vertical-align: top;
height: 100%;
overflow: hidden;
position: absolute;
}
#menu {
background-image: url('menubg.png');
width: 220px;
margin: 0;
padding-top: 50px;
padding-left: 30px;
padding-right: 20px;
color: #e8e8e8;
height: 100%;
}
#content {
padding: 0px 0px 30px 325px;
width: 1000px;
display: inline-block;
vertical-align: top;
}
Thanks in advance!
* #Ritabrata Gautam *
The changed CSS fixed my second problem but now I'm back to the cut off sidebar on shorter pages: See here: http://www.tarawilder.com/staging/?page_id=19
I'm leaving my house now, I'll be able to respond later tonight. Thanks again for your help!
#container {
display: inline-block;
height: 100%;
position: absolute;
width: 900px;
}
try this..it will give you the result you want..though there are many other mistakes in your html markup
some other areas where you need to be careful...
your container's width is 900px..which contains side menu and the large text...combined width of your side menu and the large text is far greater than your 900px width of your container..as you are not using overflow:hidden; you cant see the effect...why dont you apply overflow:auto; width:100% or something like that
BETTER CSS::
#container {
height: 100%;
width: 100%;
overflow: auto;
position: absolute;
}
ACCORDING TO YOUR NEW PROBLEM :: now your body height must be more than 100% now..thats why after 100% height your side menu becomes invisible
CHANGED CSS ::
#container {
height: auto;
overflow: hidden;
position: absolute;
width: 100%;
}
your third problem ::
strange...you are now using width:100% for your cantainer..and your container contains side menu and large text...and side menu has width of 300px and then your having width of 1000px for large text..so naturally the overflowed part ot the text gets invisible; and also remove position:absolute; from container
now your css
#container {
height: auto;
overflow: hidden;
width: 100%;
}
#content {
padding: 0px 0px 30px 325px;
vertical-align: top;
}
NOTE:: don't delete your edited part of your question..you have already deleted the 2nd edit you made to your question earlier...it will create difficulties for future users to relate the answer with question
Make sure that your parent containers (#container, body, html) are height:100%; as well.
Personally, I would do something like this(if the rest of the site layout allows it):
Instead of creating separate backgrounds for #menu, #menu-caontainer and body i would create background on body something like this: http://cl.ly/image/3L060f2w3Z0s
that would repeat vertically on y axis, so no matter how high the body is the background would stretch/repeat to the bottom.
I am trying to get my basic webpage layout together and I hit a few problems. Could someone please help me solve it. My understanding of CSS is not superb.
Code: http://jsfiddle.net/HJLzt/
The sticky footer is working, and I want to have a column left and right of the page in between header and footer. I'm not sure if the way I did it is correct.
Between left and right column and header and footer I would like to put the content. How do I center it. I cannot find a proper way, as there is always overflow and I want it only to go between the left and right column and nothing to cut off.
Thank you for your help!
EDIT:
I have updated my layout and used a bit of jquery to help out. I know I should try and make everything work in css, but it seems impossible.
Maybe I should add, that I want a whiteboard as theme. I want a wooden frame, so the sidebars always have to connect to the header and footer, as the top and bottom frames go through there.
If somebody could have a look and tell me if that is ok or not.
* { margin:0; padding:0; }
html, body, #wrap { height: 100%; }
body > #wrap {height: auto; min-height: 100%;}
#main { padding-bottom: 150px; } /* must be same height as the footer */
#main header{
height: 100px;
width: 100%;
background-color: #5d3be6;
}
footer{
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
background-color: #afeba4;
}
/* CLEAR FIX*/
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
#layout_left{
float: left;
width: 100px;
min-height: 100%;
height: 100%;
background-color: #f21ce7;
}
#layout_right{
float: right;
width: 100px;
min-height: 100%;
height: 100%;
background-color: #f21ce7;
}
#content_layout{
border-left: 100px solid #e4f662;
border-right: 100px solid #e4f662;
width: auto;
height: auto;
background-color: #c36161;
}
#content{
margin: auto;
width: 96%;
}
As you've stated you're new to CSS but I'd very much recommend against your layout, it's seemingly 10 years ago standard. (no offense intended ofcourse, you're new to this, you're not going to know the do's and do not's as of yet).
Research online portfolio examples using google for ideas!
to answer your question:
I recognise your sticky footer code, I didn't work for me either, well not completely.
It doesn't work great, I'd recommend: http://css-tricks.com/snippets/css/sticky-footer/
I'd tell you myself but that tutorial is very well written and easy to understand and implement.
And for centering container use:
margin: 0 auto;
centering text you can use:
text-align: center;
Hope that helps.
This site http://doomedfromdayonemerch.bigcartel.com/ is currently scrolling too much down the page, this is because the footer (hidden) is at the bottom of the page. Even when i move the footer with CSS the page still scrolls the same amount. would like it to ideally to only scroll down a little bit. I did have overflow-y:hidden on the body, and although this did work, it doesn't allow for smaller screens/zooming in, as you then cannot scroll at all. Any help would be great! :)
In your CSS code add
html{
height:100%
}
The problem isn't with footer.
The problem resides in your div id="navigation"
I did some questions related to sticking footer into bottom of page. Check them out, maybe will help you.
I know an answer has been selected but let me explain a little further. You have the navigation div positioned relative, instead of absolute. It looks like you were trying to use absolute positioning because I see z-index in the navigation css. To use absolute positioning the parent element needs to be set to position: relative; and the element you want to have absolute needs to be set to position: absolute;
add position relative to #wrap
#wrap {
width: 740px;
height: 700px;
margin: 0 auto;
padding: 5px;
text-align: left;
position: relative;
}
and change navigation to absolute
#navigation {
z-index: 99;
position: absolute;
top: 175px;
padding-top: 10px;
padding-right: 5px;
margin-right: 4px;
height: 442px;
background: rgba(228, 228, 228, 0);
clear: both;
border-bottom-right-radius: 10px;
right: 10px;
}
If you have a quick look at this website that I am designing: http://milabalami.com
The blackline seen in the footer is the one that I want to fix. Is there anyway that I can put that footer at the bottom of the content (wrapper) of the page? I have not done any webdesigning since the golden days of tables so CSS is quite new to me.
Anyone that could assist this old man? Please be specific in any reply as I am new to CSS styling...
you mean that you want to eliminate the gap between wrapper and the black line? If yes just change the #blackbox2 margin to margin: 0 auto 15px;
You have:
#blackbox2 {
background-color: black;
bottom: 0%;
height: 33px;
margin-bottom: 15px;
margin-left: auto;
margin-right: auto;
margin-top: 11%;
position: relative;
top: auto;
width: 900px;
z-index: 12;
}
Try removing margin-top: 11%. This matches to '11% of the parent height', which is why your blackbox2 is so far from the wrapper above it.
Does this solve your problem — http://www.cssstickyfooter.com/ ?