I've found a method of placing the footer that I like, except for the fact that footer overlaps the content when the page resizes.
Using the structure and formatting I have already, how can I "clear" the footer, so that it drops off when the page resizes (avoiding an overlap of #content)?
I've tried clear: left and that does nothing for this.
Essentially, I want the footer to always be visible, and attached to the lower left of the window, as long as space allows; however, when the window gets smaller, I don't want the footer to overlap my content.
CSS:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
background-size: cover;
margin: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
height: 100%;
min-width: 900px;
overflow: hidden;
}
.main_nav {
margin: 0;
width: 160px;
float: left;
padding-left: 40px;
overflow: hidden;
}
#content {
float: left;
width: 750px;
height: 600px;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
height: 50px;
}
HTML:
<body>
<div id="wrapper">
<div id="header">
<h1></h1>
<ul class="main_nav">
<li></li>
</ul>
</div>
<div id="content">
</div>
</div>
<div id="footer">
<div id="footer_content"></div>
</div>
</body>
The answer has been already choosen, but i wanted to give an alternative.
The "wrapper" contains "header" and "content", while the "footer" is outside of it. You could, for example, add
z-index:10;
to the wrapper's css and
z-index:1;
to the footer's css.
This one last isn't really needed, but it's for completeness. This way, whenever they get in "touch", the one with higher z-index will remain on foreground (ie, higher level on the z-axis, that is the axis perpendicular to the screen surface) and the other elements will slide behind, according to their own index.
This problem is because of width. You width is different in each case i.e. in content , footer & wrapper as well. I created a jsfiddle
[http://jsfiddle.net/jvaibhav/xncuF/37/]
try this.
Related
I have an exotic design that needs the following. The left side must scroll, while the right side + top head must stay put (fixed). See attached image.
I can accomplish this by position: fixed on the top and right side. The top & right hand side stays put while the left scrolls.... BUT then the PROBLEM is that there is NO scroll bar anymore if anybody zooms in and you also cannot scroll left to right to see whole page
How would one attack such a layout?
Thank You.
Could not post code before - let me try again:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Exotic</title>
<style type="text/css">
#top {
background-color: #FF0;
width: 1800px;
height: 50px;
position: fixed;
left: 0px;
top: 0px;
}
#sideLeft {
float: left;
width: 950px;
background-color: #9C0;
clear: left;
}
#sidebarLeft {
background-color: #0CC;
height: 800px;
width: 300px;
float: left;
}
.list {
float: left;
width: 600px;
margin-top: 100px;
}
#ordoner {
background-color: #F90;
float: left;
width: 640px;
height: 800px;
position: fixed;
top: 50px;
left: 950px;
}
#sidebarRight {
width: 210px;
height: 800px;
position: fixed;
top: 50px;
left: 1590px;
background-color: #0CF;
}
</style>
</head>
<body>
<div id="top">
</div>
<div id="sideLeft">
<div id="sidebarLeft"><!--end #sidebarLeft--></div>
<div class="list"><!--end .lisist--></div>
<!--end #sideLeft--></div>
<div id="ordoner"><!--end #ordoner--></div>
<div id="sidebarRight"><!--end #sidebarRight--></div>
<div id="footer"></div>
</body>
</html>
Clarification:
My css reflects 2 things in the right hand side but the point is that the right and the top should be static while the left scrolls... AND they should be horizontally scrollable IF a user zooms :)
Also, I've tried wrapping things in a container div, but that has its own problems - it scrolls but never reaches the right hand side if the window is not maximized.
Thanks again.
To clarify: As an example to get my point across... please resize the stackoverflow window to half your horizontal screen size... Now see how you can scroll left to right? If you zoom in, you can scroll left to right also to see the whole page. Well, in my layout, which works in full screen browser mode... once I resize that scroll bar at the bottom does not appear at all leaving the user with no ability to scroll horizontally. See picture below
Fiddle
http://jsfiddle.net/moby7000/tWb3e/
Its not very hard to create a layout like this.
I created one for you, see that Working Fiddle
HTML:
<div class="Container">
<div class="Header">
<p>The Header div height is not fixed (But he can be if you want it to)</p>
<p>This Layout has been tested on: IE10, IE9, IE8, FireFox, Chrome, Safari, Opera. using Pure CSS 2.1 only</p>
</div>
<div class="Content">
<div class="Wrapper">
<div class="RightContent">
<p>You can fix the width of this content.</p>
<p>if you wont, his width will stretch just as it needs to.</p>
</div>
<div class="LeftContent">
<p>this will scroll</p>
</div>
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.Header
{
margin-bottom: 10px;
background-color: #6ea364;
}
.Content
{
position: relative;
z-index: 1;
}
.Content:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
}
.Wrapper > div
{
height: 100%;
}
.LeftContent
{
background-color: purple;
overflow: auto;
}
.RightContent
{
background-color: orange;
float: right;
margin-left: 10px;
}
Bonus:
with a little change in the CSS, you can create a beautiful scrolling.
See that Fiddle
Edit:
If you want to set a width value to the left side, that is actually bigger then the body size (and to have an horizontal scroll), do it that way.
<div class="LeftContent">
<div style="width:1200px;"> <-- better to aplly the width from the CSS
..<The content>..
</div>
</div>
you need to add overflow:auto; to the area you want to scroll.
Have you tried
overflow-y: scroll;
in body?
I would like to put footer on the bottom of the page (or bottom of the screen, if page is shorter than a screen). I am using code:
<div id="wrapper">
<div id="header-wrapper">
...
</div> <!--header-wrapper-->
<div class="clear"></div>
<div id="body-wrapper">
<div class="row960">
<div class="menu">...</div>
<div class="content">...</div>
</div> <!--row960-->
</div> <!--body-wrapper-->
<div class="clear"></div>
<div id="footer-wrapper" class="gray">
</div> <!--footer-wrapper-->
</div> <!--wrapper-->
and css:
.clear{
clear:both;
display:block;
overflow:hidden;
visibility:hidden;
width:0;
height:24px;
margin:0px
}
html, body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body{
background-color: #000000;
color: #FFFFFF;
font-size: 14px;
}
#wrapper{
min-height: 100%;
position: relative;
}
#header-wrapper{
height: 100px;
}
#body-wrapper{
padding-bottom: 50px;
}
#footer-wrapper{
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}
.row960{
width: 960px;
margin: auto;
overflow: auto;
}
#menu{
width: 200px;
float: left;
}
.content{
width: 740px;
margin-left: 20px;
float: right;
}
The problem is that footer is on the bottom of the screen even if the page is longer than a screen (it covers a text). I've checked it with Firebug and body-wrapper has right height, but row960 has height of screen instead of height of page. I can't figure out how to fix it. Does any one have idea what to do?
You can see my page on http://www.domenblenkus.com/fiap/notice.php
Thanks for your help!
EDIT: I don't know if I emphasized it enough, so I would like to point it out that the main problem is that height of row960 is not right.
Hmmm, I think I have a solution that fits the requirements you stated. There are certainly other ways to do this though, so you can keep looking around if you don't agree with this method. (Also, when I looked on your site it appeared that your #wrappper element was a sibling of #footer-wrapper, and not a parent.)
So, the HTML would look like (structure copied from your site):
<div id="wrappper">
<div id="header-wrapper" class="gray">
<div class="clear"></div>
<div id="body-wrapper"></div>
<div class="clear"></div>
<div class="spacer"></div>
</div>
<div id="footer-wrapper" class="gray"></div>
Note the addition of the .spacer element at the bottom of #wrappper, it's required for this approach of the "sticky footer".
Now, CSS you'll need to add (add to any current definitions if you already have them):
body, html{
height: 100%;
}
#wrappper{
min-height: 100%;
margin-bottom: -50px;
height: auto;
}
.spacer{
height: 50px;
}
If you're wondering why I chose 50px for the height, it's because that's the height of your footer element, #footer-wrapper.
Anyways, I only really tested this in the Firebug console, so I'm not sure how it will behave in a live environment, but I'm fairly certain this will give you what you want. If this isn't what you were looking for, let me know and I'll be happy to help further!
If you want it at the bottom, then you don't need the position:absolute or bottom:0, it will be at the bottom of your div anyway.
You can try doing it using margin. Here is a fiddle of what I'm taking about: http://jsfiddle.net/8WLyP/
Basically for your HTML, place all your content inside a "container" element and then your footer will be a sibling of that element.
Then in your CSS what you will need is to give them html and body elements a min-height: 100%
You "container" element will also have min-height: 100%
You will then need to give your footer a heightof X, in my example it's 50 pixels.
The "container" element will need to have margin-bottom: -50px or whatever value you give the height of the footer.
With all that done, make sure you don't give "container" and "footer" any other margins or paddings than the ones shown, if you need to give them, then you will need to give it to the child elements, in my example p element.
With this technique, as opposed to position: fixed the footer will stick to the bottom of the window if the content is too short, and it will move with the content when the content is bigger than the window/viewport.
HTML:
<div id="container">
<header>
<p>Header</p>
</header>
<section>
<p>Section</p>
</section>
</div>
<footer>
<p>Footer</p>
</footer>
CSS:
html, body, header, footer, section, p, div {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
p {
padding: 5px 10px;
}
header {
width: 100%;
background: #f00;
color: #fff;
}
section {
width: 100%;
height: 200px;
background :#0f0;
color: #fff;
}
#container {
width: 100%;
min-height: 100%;
margin-bottom: -50px;
}
footer {
width: 100%;
background :#00f;
color: #fff;
height: 50px;
}
You want to place the footer at the bottom of the content. BUT: You want to have it at the bottom of the viewport (window) if the content above it is shorter.
So, try this:
the CSS:
#footer-wrapper {
position: relative;
width: 100%;
height: 50px;
}
#body-wrapper {
position: relative;
height: 100%;
}
… and the JavaScript (jQuery):
var bodyWrap = $('#body-wrapper'),
footerWrap = $('#footer-wrapper'),
windowHeight = $(window).height();
var heightRemaining = parseInt(windowHeight - bodyWrap.outherHeight() - footerWrap.outerHeight());
if (heightRemaining > 0) bodyWrap.css('min-height', heightRemaining);
Didn't test it due to little time.
Give it a try.
I have created a layout which works well in IE8+ but not in IE7. The problem is, the absolutely positioned #container (which has a top to push it below the header and a bottom of zero to fill the body) fills the entire content length in ie7 rather than only fill the body.
I have setup a jsfiddle http://jsfiddle.net/TPNpy/97/ to show what's happening and would really appreciate any help.
Setting the height using javascript for ie7 is my last resort, and i'm not convinced this is the only way.
Thanks
It would be easier to have a look at the code in jsfiddle, but here is the basic structure and CSS:
#container { background-color: #333; width: 100%; position: absolute; bottom: 0; top: 80px; }
#sidebar { background-color: #333; width: 170px; height: 100%; float: left; overflow: hidden; overflow-y: auto; }
#content { background-color: #F9F9F9; height: 100%; margin-left: 170px; overflow: hidden; overflow-y: auto; }
<div id="container">
<div id="sidebar">
Sidebar Content (which allows scrolling when very long)
</div>
<div id="content">
Main Content (which allows scrolling when very long)
</div>
</div>
I have a div main that I have wrapped around my content and a sidebar. I have assigned the #main to have a background image and a min-height of 1200px.
In Google Chrome & Firefox, when I inspect the div doesn't have any properties when I inspect the source. Thus the div's background image and height don't work either.
<!--Main content layout -->
#main {
clear:both;
position: relative;
min-height: 1200px;
background-image:url(images/white.png);
background-repeat: repeat-x;
}
.sidebar1 {
float: right;
width: 20%;
padding-bottom: 10px;
margin-top: 20px;
}
.content {
padding: 10px 0;
width: 76%;
float: left;
margin-top: 20px;
}
The site address is: http://www.tibetskyvillage.org/
Would really appreciate someone elses eyes on this. I use this method all the time and for some reason this time it's failing.
The comment <!--Main content layout --> is not a valid CSS comment but an HTML comment instead causing a parse error.
See the screenshot, I have found some disturbances in your layout, to fix this or solution to your problem is
Don't give the image as background in CSS, give it as image in html like this
<img width="1360" height="675" src="images/bg0.jpg" class="wraper">
<div id="main">Your content</div>
Add styles to the image and main as
.wraper {
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
}
#main{
position: absolute;
min-height: 1200px;
width:100%;
}
I'm having a problem with a webpage.
I'm using the min-height property to place the footer at the bottom of the page (if content is not long enough) and after the content (if content is longer than the window). There are plenty of tutorials that describe this method and I too did it this way.
html, body { height: 100%; }
.container {
min-height: 100%;
position: relative;
}
.footer {
position: absolute;
bottom: 0;
}
and some other code. It works fine then.
The problem occurs when I create two additional divs to add drop shadows to the container div. I have:
<div class="left-shadow">
<div class="right-shadow">
<div class="container">
...
</div>
</div>
<div>
I figured html and body height remain 100%, left-shadow div have min-height of 100%, and right-shadow and container have height of 100% (I'm assuming that the 100% will mean 100% of the height of the parent element).
However, it does not work (in Firefox, it works in Chrome, I don't really care about IE), and I've tried all sorts of combinations to get it right, but to no avail. Any help would be appreciated.
EDIT: (partial code)
<html>
<head>
...
</head>
<body>
<div class="left-shadow">
<div class="right-shadow">
<div class="container">
<div class="header">
header content
</div>
<div class="content" >
content goes here
</div>
<div class="footer">
footer content here
</div>
</div> <!-- end container div -->
</div>
</div>
</body>
</html>
And the relevant css:
html {
overflow-y: scroll;
height: 100%;
}
body {
margin: 0 0 0 0;
height:100%;
}
.left-shadow
{
width: 1084px;
background: url("images/left-shadow.png") repeat-y left;
/* both bg images are 30px wide. 1024 + 30 + 30 = 1084px */
margin: auto;
min-height: 100%;
}
.right-shadow
{
width: inherit;
background: url("images/right-shadow.png") repeat-y right;
margin: auto;
height: 100%;
}
.container {
position: relative;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
width: 1024px;
height: 100%;
}
EDIT 2:
So I just found out that this question belongs at doctype. So from now on, I'll ask questions in the right place. But since this is already up, I'd ask that people respond anyway without getting into where questions should be posted. Thanks.
First of all, to create a shadow effect use CSS. If CSS solution isn't what you're looking for then maybe try to set a shadow as a background image of .container. Right now your mark-up is overloaded by unnecessary elements.
But if that extra mark-up is the only way to do what you want to do, then try something like this:
* {
margin: 0;
padding: 0;
}
html, body, .shadow, #container {
min-height: 100%;
}
#container {
position: relative;
}
#content {
padding-bottom: 55px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background: #0a0;
}
And HTML mark-up (these shadow divs make it look terrible):
<body>
<div id="shadow-left" class="shadow">
<div id="shadow-right" class="shadow">
<div id="container">
<div id="content">
Page contents
</div>
<div id="footer">
Footer
</div>
</div>
</div>
</div>
</body>
I really recommend using this simple solution for a "sticky footer" instead. Just gets rid of problems: http://ryanfait.com/sticky-footer/
All that it requires is for you to be able to define a fixed height for your footer, which should be no problem in virtually all cases.
Works in all common browsers!