on my website i want the footer at the bottom of the site. i add this to the footer css:
position: fixed;
bottom: 0;
width: 100%;
The footer is now good at the bottom but all the content goes on the footer div. Like the footer div is background. How can i put the footer at the bottom right?
You seem to be asking two different questions. Try raising the z-index of the footer element to keep it above other content.
To put it at the bottom right, set a width and a right position of zero.
I'm not sure if I understand your problem but you can try to add/change this in your footer css
right: 0;
width: 50%;
z-index: 999;
You'll need to make use of the CSS z-index property and give your main content container padding-bottom equal to the height of the footer to prevent your footer cutting off the bottom of your page.
Take a look at this article "How to keep footers at the bottom of the page":
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
You will want to compensate for the height of the footer by adding the footer's height to the margin-bottom of your content's region. First, look for the element that appears right before your footer on every page. Hopefully it will be something like this:
<div id="header">
HEADER CONTENT
</div>
<div id="content" style="margin-bottom: 50px;">
YOUR SITES CONTENT
</div>
<div id="footer" style="position: fixed; bottom: 0; width: 100%; height: 50px;>
FOOTER CONTENT
</div>
Also, don't use inline styles like I have above. Use propper css please :) It helps all the internets.
Position: fixed takes the element out of the flow of the page. The result is that your footer is occupying "nothing" when it comes to affecting your other elements.
The reason your content is ending up on top is that it doesn't actually know it's there. What I mean is that you need to account for your footer when thinking of your other elements.
For instance, if you have a wrapper that ends just before your footer, you can give it an extra bottom padding that is equivalent to the height of your footer.
To answer a sort of hidden second part of your question: To be able to give an element a z-index, it needs to be position with something other than "static" (the default positioning). If you're trying to work out z-indexes on two different elements, you'll want to give them both a position value other than "static" to get total control.
Hope some of this helps,
iso
Related
I am creating a site that has three major components - the navigation bar on the left, the central content (which is broken into a Title + Data), and a footer. The footer is fixed to the bottom of the page. I have JSFiddle example here: http://jsfiddle.net/6Ur89/1/
The issue I am running into is that, I want to the #data div to scroll vertically when it is too big for the div. The problem that I am seeing is that, when this happens, the div just gets pushed underneath the footer (instead of stopping at the footer) until infinity and scrolling never happens.
Within my CSS, I do have this:
html, body {
overflow: hidden;
}
which I put in to prevent horizontal and vertical scroll bars appearing (presumably due to the footer). However, when I remove this style, the entire content div scrolls which is almost what I want (I would prefer that the title doesn't scroll...but that isn't the end of the world).
Can anybody provide any suggestions where I am going wrong? Again - want #data div to scroll and to stop at the footer. I want a fixed footer at the bottom of the site and I don't want the footer to create the scroll bars. Please let me know if you need clarifications.
Update: Yay for Stackoverflow - after typing up this question, one answer popped up immediately. I put a clearfix on the wrapper, so scrollbars don't appear due to the fixed footer. Updated my jsfiddle to reflect. So, essentially, I'm looking to understand how to just have the #data div scroll.
http://jsfiddle.net/Xsu3Q/
added a padder inside the content div:
<div id="content">
<div class='padder'>
<div id="title">title</div>
<div id="data">Lots of data...
.padder {padding-top: 100px;}
moved the content 100px up outside the frame:
#content {
position: relative;
top: -100px;
margin-left: 350px;
height: 100%;}
This way you can use the height:100% property to match the height of the body
AND subtract the 100px for your footer.
for a cleaner example look at a similar answer
Hi this is a quick css 101,
I'm battling with aligning, maybe someone can help
on another note, i'd like to ask :
what is the correct way of thinking when
building html divs - restricting div's sizes upfront and overriden:hidden it's contect -OR- letting the inner divs push the parent and hence sizing it.
what measures are prefered for divs so it will fit best different resolutions?
rems/precents?
Thanks.
the wrapper should be a container for the content
<div id="wrapper">
<div id="top"></div>
<div id="content"><p>content here</p></div>
</div>
<div id="footerbg"></div>
I made the footer snap to the bottom outside of the wrapper, if you want to move the top outside that is also fine but remember you will have to adjust the bottom padding to compensate for its height too.
see jsFiddle here: http://jsfiddle.net/F577v/9/
Answer to your QNs:
dependent on the situation, I will always try allow for the content to size the div - but I make sure I have padding and margins to reflect design.
I have always used px count for sizing and use media types in css to compensate for different resolutions
You can make it with fixed position using css:
div {
position: fixed;
top: 400px;
bottom: 0;
left: 0;
right: 0;
}
I am kind of a beginner in css and I have tried to see if I can find a solutions for my problem with getting my content not to show under my transparent header when there is a need to scroll. I have checked the following post but I can't make this work. I would be extreamly happy if I could get some guiding into this if possible. I attached a visual of my problem if it is of any help. www is www.portaponte.com Thanks in advance!
Hide scrollable content behind transparent fixed position divs when scrolling the page?
Well, Although not perfect, I'll go with an answer:
The problem with this solution is that scrolling will work only when hovering the scrollable content, meaning that you wont be able to scroll if your mouse is outside the big text container. That being said, thats what I thought you could do:
First of all, wrap the #casing div in a #casing-wrapper div, getting something like this:
<div id="casing-wrapper">
<div id="casing">
lots of content here...
</div>
</div>
Then you'll need to style this new div this way:
#casing-wrapper {
width: 800px;
position: fixed;
left: 50%;
margin-left: -400px;
top: 90px;
overflow-y: scroll;
}
Also you'll need to add some jQuery to set #casing-wrapper's height depending on window's height:
jQuery(document).ready(function(){
setWrapperHeight();
jQuery(window).resize(function(){
setWrapperHeight();
});
});
function setWrapperHeight() {
var height = jQuery(window).height();
var margin = 90;
jQuery("#casing-wrapper").css({"height":height - margin});
}
And that's all. Doing this, we created a new layer containing the scrollable content that has the window's height minus 90px. Those 90px come from your header's height plus it's top margin. Since the wrapper has position: fixed, it won't move on scroll, but it's content will. On top of that, with the overflow-y: hidden; property we clip any overflowing content, resulting in the text not being visible under your header.
Anyway, in my opinion the result of letting the letters go under the header is cool, and I won't change it :P
I often run in the following problem, I have a web page with the following divs:
header
sidebar
content
footer
sidebar and content are both float left with a break afterwards.
I want content to expand to the right edge of the browser, no matter how wide or narrow the browser width.
However, no matter what I try, I am face with two choices:
content must be a fixed width
content is not a fixed with (no width property) but resizing the browser pops the content down under the sidebar
The site I'm working on has many more divs than these four so it's hard to post CSS code that is not convoluted, but does anyone have a general strategy to enable content to expand out to the browser's right edge while never popping under sidebar if browser width is made too small?
My current solution is: table.
Addendum 1
Thanks Hristo, your solution works except that sidebar and content can't have fixed heights, which causes the footer to appear in the middle. Since you aren't using floats, how do you make the footer come after both of them?
You should be able to set a margin-left to the #content and position:absolute to the #sidebar.
For example:
<div id=wrap>
<div id=content>
...
</div>
<div> id=sidebar>
...
</div>
</div>
and some css
* {
margin: 0;
padding: 0;
}
#content {
margin-left: 200px;
background: green;
}
#sidebar {
width: 200px;
position: absolute;
top: 0;
left: 0;
background: pink;
}
and the example:
http://jsbin.com/umomuk
This is the same solution that google uses on their search result pages.
UPDATE
http://jsfiddle.net/UnsungHero97/ABFG2/10/
Check out the fiddle...
http://jsfiddle.net/UnsungHero97/ABFG2/2/
Let me know if you have any questions. I hope this helps.
Hristo
On solution will be to use the minimum width:
.containerDiv {
min-width: 600px;
}
if the div is greater than 600px it will just expand, and if the window is resized to a lower value the minimum width will be 600px. However, some versions of IE doesn't support this property, a different solution will have to be implemented for IE.
This link suggest a hack, but i have not tested that personally.
CSS play
I have to create a div that has a paper texture to it, with rounded corners. When the content inside grows, this div should grow along with it and not ruin the bg..
So to do this, I made the main div with the content, and made it repeat the center of the bg and set the height to auto. I made a div for the top and bottom parts of it with the textures and rounded corners. I used absolute positioning relative to the content div so when it grows, the bottom bg will be below the content div at all times.
Everything looks good BUT, the top and bottom divs are covering the content div. I can fix this by leaving a large gap at the top and bottom of the content div but it looks strange having such a large gap.. and its improper.
Any ideas around this?
Try adding a margin to the top and bottom of the content div (ie. margin: 20px 0 30px 0; where 20 is the height of your top div and 30 is the height of your bottom div). Also, can't you just put the three divs in a container and position them relatively, one stacked on another?
Example:
<div id="container">
<div id="top"></div>
<div id="content"></div>
<div id="bottom"></div>
</div>
It´s hard to say without looking at your code, but I think your problem can be easily solved by adding a top and bottom padding to your main div, the size of the top and bottom parts.
Edit: An alternative would be to put your content in another div in the main div and abandon absolute positioning. Just put all three divs one after the other and use negative margins to pull the content up over the top div and do something similar for the bottom border.
Use z-index: http://www.jsfiddle.net/xPEY6/
(Per the CSS spec you don't actually need the .text div, you could set .top and .bottom to z-index: -1 and .container to z-index: 0, but I wouldn't rely on all browsers implementing that detail correctly.)
You can do this with positioning:
div.paperTexture {
position: absolute;
top: 0px;
bottom: 0px;
}
Also works well if you need the div to take up 100% of the viewport minus Xpx. Just set the top or bottom to Xpx.