I've made a footer wrap outside the content wrap (which everything else is in). I would like to make the footer wrap extend to fill the width of the page and I would like it to be fixed on the bottom. Here's the code:
footerWrap {
background-color:#000;
width: auto;
}
footer {
margin: auto;
text-align:center;
width:965px;
height:150px;
background-color:#000;
border:#000 inset medium;
}
The website is item9andthemadhatters.com please let me know if you need any other code or info. Thanks!!
update:
html {
padding:0;
height:100%;
width: 100%;
}
body{
margin: -1px 0 0 0;
background-color:#FFF;
font-family: calibri;
background-image:url(images/item9HeaderSideFiller.gif);
background-repeat: repeat-x;
padding:0;
height:100%;
width: 100%;
}
wrap {
width: 965px;
margin:auto auto;
min-height:462px;
max-height:4000
px;
footerWrap {
background-color:#000;
position:absolute;
bottom:0;
width:100%
}
footer {
margin: auto;
text-align:center;
width:965px;
height:150px;
background-color:#000;
}
}
To fill the page
width:100%
To stay at the bottom of the page a solution could be
position:absolute;
bottom:0;
notice that in both body and html you have to set
padding:0
height:100%;
Try width:100% in footerWrap. Also, what do you mean by fixed on the bottom? Do you mean the footer should always be at the bottom of the screen, even when scrolling? Or do you mean it should always be at the bottom of the page?
Related
take a look at the footer div here which contains all rights reserved
all 3 divs have a width of 70%, but the footer's width is displayed more than intended
#header{
width:70%;
margin: 0 auto;
background:#CCCCCC;}
#container{
width:70%;
margin: 0 auto;
background:#CCCCCC;
}
#footer{
width:70%;
background:#000000;
color:#FFFFFF;
position:fixed;bottom:0;
left:15%;
}
It's because of the default margin/padding on the body element. it's a good idea to use a reset at the top of your css for consistency. ie
*{margin:0;padding:0;}
This will save you a lot of headaches.
reset the margin, padding for body.
body{
margin: 0;
padding: 0;
}
Updated fiddle
#footer{
width:68%;
margin: 0 auto;
background:#000000;
color:#FFFFFF;
position:fixed;bottom:0;
left:16%;
}
or can reset the body padding and margin
body{
margin:0;
padding:0;
}
I'm trying to add a div block so that it's at the center of the screen. All i have is a fixed background image and it's doing some odd stuff.
CSS:
body {
margin:0;
padding:0;
}
#middle { <--- the white div block
background-color:#FFF;
display:block;
width:750px;
height:750px;
margin:0 auto 0 auto;
margin-top:15px;
position:relative;
overflow:hidden;
}
#bigbg { <-- background image
height:auto;
width:100%;
z-index:-100;
min-height:100%;
min-width:100%;
margin-left:0%;
position:fixed;
margin-top:0px;
}
html:
<div id='middle'>
</div>
<img src="images/backgroundmain.jpg" id="bigbg">
Looks like this:
i want the white div block to be centered in the middle. Is there a better way of applying a background image? I was able to achieve what i wanted by adding the background-image:url property to the html, but i wasn't able to add all the properties i wanted such as fixed margins/width etc..
Change margin:0 auto 0 auto; to margin:0px auto; in the middle class
Upadate your css a below
body {
margin:0;
padding:0;
width=100%;
}
#middle { <--- the white div block
background-color:#FFF;
display:block;
width:750px;
height:750px;
margin:15px auto 0 auto;
position:relative;
overflow:hidden;
}
#bigbg { <-- background image
height:auto;
width:100%;
z-index:-100;
min-height:100%;
min-width:100%;
margin-left:0%;
position:fixed;
margin-top:0px;
}
to the 'middle' div add margin-left: auto; margin-right: auto;
or you could do something like this:
body {
width: 100%; <---make sure you use percentages
height: 100% <---
margin:0;
padding:0;
}
#middle {
background-color:#FFF;
display:block;
width:25%; <--change the width and height to % also
height:25%; <---
left: 37.5%; <--since your div is 25% wide you want to move
<--- it 37% to the right to center it. (100% - 25% = 75% / 2 = 37.5%)
margin:0 auto 0 auto;
margin-top:15px;
position:relative;
overflow:hidden;
}
#bigbg { <-- background image
height:auto;
width:100%;
z-index:-100;
min-height:100%;
min-width:100%;
margin-left:0%;
position:fixed;
margin-top:0px;
}
However, if you're keeping your code the same, i'd suggest just switching margin:0 auto 0 auto; to margin-left: auto; margin-right: auto;
I have two divs, top div has style as follows:
.context_left {
float:left;
display:inline-block;
width:775px;
padding-left:10px;
margin-top:20px;
min-height:450px;
margin-bottom:20px;
}
while that the div below it has style:
.footer {
width:100%;
height:54px;
display:block;
position: absolute;
margin-top:80px;
left:0;
}
when the div context_left changes it's height the div footer remains at it's position, I want to move the footer div down if context_left div changes it's height. Can anyone please help me to do it?
Did you try to add this lign to your .footer
clear:both;
And delete
position: absolute;
You have set your footer with position: absolute;. That means your footer should be kinda fixed, but inheriting from its parent.
Try changing absolute to relative and see if that is what you want.
.footer {
width:100%;
height:54px;
display:block;
margin-top:80px;
left:0;
}
Removed the position: absoulte from footer. Try this. Because the footer will remain at the same position till position:absolute remains in style.
Css:
.context_left {
float:left;
width:775px;
padding-left:10px;
margin-top:20px;
min-height:450px;
margin-bottom:20px;
display:inline-block;
}
.footer {
width:100%;
height:54px;
display: block;
clear:both;
margin-top:80px;
left:0;
}
Working Fiddle: http://jsfiddle.net/dMawS/show
If a sticky footer at the bottom of the page is, what your looking for, then this can help you:
html {
width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
body {
/* the margin compensates the footer plus the footer's top margin */
margin: 0 0 134px 0;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 54px;
}
The footer will always be at the bottom of the browser's viewport or below the content.
Demo
Try before buy
Basiclly i am try to make my header fix at the top of the page, and at the same time i also need my footer must be at the bottom of the page, whethere there is less or more content. But i don't want my footer position fix. So when ever there is large amout to data footer move with that. The code i am using right now is workin great if i don't make my header fix.
<body>
<div id="header">header</div>
<div id="content">content</div>
<div id="footer">footer</div>
</body>
CSS for this is
*{ margin:0px; padding:0px;}
html{
margin:0;
padding:0;
height:100%;
}
body {
min-height:100%;
position:relative;
}
#header {
padding:10px;
background:#5ee;
}
#content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background:#ee5;
}
This is the code, I have not fixed my header in this , but i need some help to it fix.
What you are looking for is specifically called "sticky footer".
http://www.cssstickyfooter.com/
If I understand you right, it seems to me that you're after a sticky header. Try replacing your two rules with following
#header{
background: none repeat scroll 0 0 #55EEEE;
padding: 10px;
position: fixed;
top: 0;
width: 100%;
}
#content{
background: none repeat scroll 0 0 #FF0000;
color: #FFFFFF;
height: 2000px;
margin: 40px 0 0;
padding: 10px 10px 80px;
}
Here is the demo changing the #content height affects footer position but not header's.
Use this
position:fixed;
For your header.
As for footer - use this http://ryanfait.com/sticky-footer/
I'm try to create a side by side div that have 100% height, i manage to get the first div working but the second one is cause problem, been trying to do this for the last 3 hours.
#mainWrapper{
width: 900px;
margin:0px auto;
background:#fff;
}
/*leftColumn */
.leftColumn {
float:left;
width:250px;
height:100%;
background:#fafafa;
border-left:solid 1px #dedede;
position:fixed;
top:0px;
}
/* Content */
.mainContent {
float: left;
width: 650px;
height:100%;
background:#fff;
margin-left:252px;
padding-bottom: 50px;
}
example of how it's supposed to look like
http://i49.tinypic.com/ycef7.jpg
how it looks like at the moment.(tried everything dunno how to fix it)
http://i49.tinypic.com/2ryk5eo.png
Rather than giving explicit height to both the inner divs floated left, you should use overflow:hidden; on parent div, e-g:
#mainWrapper{
width: 900px;
margin:0px auto;
background:#fff;
overflow:hidden;
}
Add
html, body {
height: 100%;
}
(http://jsfiddle.net/zYWjJ/2/)