I have a problem I can't seem to fix.
I have a big background banner which is set to position: absolute problem is, I want my footer to constantly be underneath it - no matter what height the banner has.
An example:
Footer looks fine: http://danne-bro.com.web122.curanetserver.dk/histor.aspx
Footer NOT-fine: http://danne-bro.com.web122.curanetserver.dk/who.aspx
I have tried many many things as you can see in the sourcecode. A scraped version of what I'm trying to accomplish would be something like this:
<div id="fit">
<div class="wrapper">
<div id="banner">BANNER IN HERE - Position Absolute so its always underneath</div>
</div>
<div class="wrapper">
All content goes here - which is on top of the banner
</div>
</div>
<div id="footer">
Footer in here - should float right under the banner.
</div>
But exactly how I make the footer stay under the banner (no matter it's height) is a problem for me. I hope I explained myself well enough.
You cannot float an absolute positioned element, because when you use position: absolute; your element gets out of the document flow, you need to use top, left, right, bottom to position it, floats wont work on absolute, more or less you can do is use an absolute positioned div inside a position: relative; container, or instead try using ryan fait's sticky footer
Related
I've got a layout with a left sidebar to the content. Sidebar is absolutely positioned, width 200px, and content has a margin-left of 200px. That's all dandy, but I just began animating the navigation, I would like it to slide in from underneath the content. See fiddle.
Problem is, the absolutely positioned sidebar is above the content, regardless of setting the z-indexes to 1 and 2, respectively.
Setting the sidebar's z-index to -1 has it slide in correctly, but places it underneath it's parent, making navigation unclickable.
fiddle
<div class="parent">
<aside class="animated fadeInRight">
... navigation ...
</aside>
<main>
... content ...
</main>
</div>
How do I have the sidebar slide in from underneath the content, but above the parent?
Aha! I've figured it out.
As per w3schools...
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
So simply adding position: relative to the <main> fixes it.
Updated fiddle
If you add position: relative; to your main box, the z-index css will be applied. The way you currently have it, the z-index is not working because it needs to have a position style added to it.
I have a div on my homepage, not positioned, it holds the main image. On top of this main image I have a container which holds my search bar. I've positioned this container position:relative top:-500px; so that it appears over my main image.
I then have another 2 containers which come next, but if I do nothing positionally with them, they appear after a big vertical space, so I've had to position:relative and add a minus top to. I have to keep doing this top:-300px or whatever because if I don't a space appears beneath which I can't fill.
Now the next div down is the footer which I don't want to have to posiiton because it appears on every page. How can I get rid of the space between my featured properties and the footer?
Here's the code:
//no positioning
<div style="margin: 0 auto" class="slideshowWrap">
<div class="homeslideshow slide1">
</div>
<div class="homeslideshow slide2">
</div>
<div class="homeslideshow slide3">
</div>
</div>
//position:relative top:-500px
<div id="homecontainer">
</div>
//position:relative; top:-300px; margin-bottom:-100px;
<div id="homeBoxContainer">
</div>
<div style="clear:both"></div>
//position:relative; top:-300px;
<div id="homeFeaturedContainer">
</div>
You have a problem the way you designed your containers. When you moved everything up using position:relative and top:-300 it moves everything up, but the height from your #content is still saving the space and maintaining the height.
If you want your footer links up, add the following code
#footer {
top: -300px;
position: relative;
}
that doesn't solve your problem because you still have the big height created by your odd design. You need to go back to the drawing board and redesign your container. You don't need the position:relative and moving everything up.
I generally only set top and bottom values on absolutely-positioned elements. Try this instead:
#homeFeaturedContainer {
margin-top: -300px;
margin-bottom: -300px;
}
I have been banging my head against this for a while, and I'm stumped (and probably missing something obvious). I have a page with an absolute positioned div, and inside the absolute positioned div, there are two content divs that are floated left. The height of the left content div is 1200px (based on the content inside of it). I would like the right div to be the same height as the div to its left, but I cannot get this to occur. The height of the right div is the same as the height of its parent (the absolute positioned div) which is 530px. If I go up the chain, the body, and html are both 530px as well (they are both said to height: 100%). I placed a div with clear both at the end of the absolute positioned div containing the two floated divs, and nothing.
This has been driving me crazy. I'll include a little HTML just to illustrate what's going on:
<html>
<head></head>
<body> <---- height 100%
<div id="container">
<div id="header">
</div>
<div id="content"> <--- Absolute div, height 100%
<div id="left-column"><---- float left
</div>
<div id="right-column><---- float left
</div>
<div class="clear"></div> <--- cleared div
</div>
</div>
</body>
</html>
I think your real question is
I would like the right div to be the same height as the div to its left
right?
If so, you can find the solution here: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
I have fixed footer DIV and content DIV. Footer DIV is fixed so it is visible all time. Content DIV is 100% height, but it touches footer DIV and crosses it to the end. I want it just to end when footer begins.
<div id="footer">
</div>
<div id="content">
</div>
Here is a jsFiddle link: http://jsfiddle.net/MXMWe/3/
Problem: Content DIV (with its text) goes over footer.
Note 1: Footer has to be visible all time no matter where you scroll (possibly fixed.
Note 2: Scrollbars have to be normal as it is when you first load browser. No changes there.
Here is an image telling what I want to achieve:
I will give more info if asked.
Thanks a lot.
I updated the jsfiddle:
http://jsfiddle.net/MXMWe/4/
A few things:
I added a <div id="footer-padding></div> before the closing div in #content. Then in the css added height:120px; (the same height as the #footer ) - This allows the content text to not be stuck at the bottom of the site, but instead the very top of the footer.
I removed the opacity that was on the footer because if you have the opacity it effects the entire div - AKA the text from the content div would be visible behind it since it's transparent.
I added a z-index: 2 to the #footer to ensure it is above the #content at all times.
If you're going to have an opacity/transparency as the background of the footer you will see anything it's above, behind it.
Have you tried using the CSS Sticky Footer?
I'm trying to position div as a footer inside parent div.
<div>
...some content...
<div id='footer'>
<span style='float:left'>Left text</span>
<span style='float:right'>Right text</span>
</div>
</div>
Now left and right elements are ok, but the footer div does not align to the bottom of the containing div, but to the bottom of its content.
But if i try putting position:absolute for the footer, it looses grasp on the parent's div width and thus left and right spans go one right after the other.
http://jsfiddle.net/ch4Hw/
Use position:relative; on the container and position:absolute; bottom:0; height:auto; on footer.
What you're looking for is (I think) a sticky footer. See here for a good technique: http://ryanfait.com/sticky-footer/
If you are still looking, I achieved what I think you are after here:
http://www.facebookanswers.co.uk/code/fullheight/demo2.htm
Its a self contained file, IE all the CSS is there with the markup, so you should be able to see what is going on.
The full article is here:
http://facebookanswers.co.uk/?p=312
What that gives you is a header, two columns and a footer.
One column is used for navigation, the other for the main content. The footer goes at the bottom of the main column. If the content is less than a full screen, the footer remains at the bottom of the screen. However, once you get more content than screen, it will scroll with the rest of the data.