Menu
I have a peculiar problem, which I think that a lot of other people have had before, but I'm not so sure there is a good (pure CSS) solution to it...
I have a document with the following structure:
BOTTOM is essentially a background image which should stick to the bottom right hand side corner of the browser window at all times. However, I don't want to use absolute positioning relative to the body of the document, because then it will flow under the text which is in MIDDLE.
So basically I want the same effect as the one I would get using absolute positioning, but I don't want text or other elements to sort of flow over it. It should behave just as if it didn't have any particular positioning, with width 100% and height 200px, but always in the bottom right hand side of the document.
I'll be glad to answer any questions about this problem, as I'm sure you won't understand this. ;)
556
This is a very common issue. solution: position: fixed. This does what you said, makes sure the item ALWAYS appears in a certain position. Use
position: fixed;
bottom: 0px;
right: 0px;
So the will always appear in the bottom right. idk if you can do this with a background image, but this meets your requirements. its not supported in IE 6 (but then again, what is?). see here for an example. scroll up and down the page. Notice how the image is always in at the bottom of the browser window. Also make sure your z-index is adequately large if you don't want things to flow over it. :D
191
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>test bottom right fixture</title>
</head>
<style type="text/css">
body{margin: 0;}
#top,#middle,#bottom{width:100%;}
#top,#bottom{height:200px;}
#middle{padding-bottom: 200px;}
#bottom{position: fixed;right:0;bottom:0;}
.red{background-color: red;}
.green{background-color: green;}
.blue{background-color: blue;}
</style>
<body>
<div id="top" class="red">
Lorem ipsum dolor sit amet
</div>
<div id="middle" class="green">
Lorem ipsum dolor sit amet
</div>
<div id="bottom" class="blue">
Lorem ipsum dolor sit amet
</div>
</body>
</html>
This works with both short middle content as shown, or more verbose middle content like Lorem ipsum.
There is an issue where if the page height is higher than 3*200px+middleContentHeight you will see a white gap between the green and blue blocks. This is easily fixed by declaring a background-color for body.
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
