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;
}
Related
I want to set two divs like the following.
http://snag.gy/ynuiY.jpg
This is my HTML code
<div id="topbar">
This is a top bar
</div>
<div id="wrapper">
wrapper
</div>
This is my CSS
#wrapper{
z-index:2;
marign-top: 30px;
width:80%;
height:auto;
background-color:#FFF;
left:auto ;
right:auto ;
margin: auto;
}
#topbar{
height:30px;
width:100%;
background-color:#333;
position:absolute;
top:0px;
left: 0px;
right: 0px;
color:#FFF;
overflow: hidden;
}
But the output is like following. (no wrapper)
http://i.stack.imgur.com/DXuWD.jpg
Please help me to solve this.
You have to change your #wrapper margin to padding
JSfiddle Demo
CSS
#wrapper{
padding-top: 30px;
}
Another solution is to set #topbar position to relative:
#topbar{
height:30px;
width:100%;
background-color:#333;
position:relative;/*Change to relative*/
color:#FFF;
overflow: hidden;
}
Also is margin-top no marign-top
fiddle
I think this is what you're after:
http://jsfiddle.net/ht8k40tr/
The problem is due to the order in which you're setting the margins.
Currently you're setting the top margin to be 30px, but then you're resetting that by setting all margins to auto, a simpler way to do this is just to set the margin as follows margin: 30px auto which sets the top margin to 30px, and the remaining margins to auto.
Change the "margin-top: 30px;" to "padding-top: 30px;"
#wrapper {
padding-top: 30px;
width:80%;
height:auto;
background-color:#FFF;
left:auto ;
right:auto ;
margin: auto;
}
It's been a while since I handcoded a website, and now I have the issue that my top-margin causes the 100% height to give a nasty scrollbar, as seen in the fiddle:
http://jsfiddle.net/qKGzA/
I can't figure out how to get rid of this, without cutting off the footer (like with using overflow:hidden).
It probably is a simple solution but I can't think of it :)
Thanks for your help!
My code:
html, body{
background-color:#ececec;
height:100%;
width: 100%;
margin:0;
padding:0;
}
div#wrapper{
background-color:#ffffff;
width: 962px;
height: auto !important;
min-height: 100%;
height:100%;
margin:0 auto;
padding:20px 15px 0px 15px;
position:relative;
display:block;
}
footer{
background-color:#363636;
width:95%;
height: 15px;
margin:0;
padding:10px;
position:absolute;
bottom:0;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#e1e1e1;
text-align:center;
}
footer p{
margin:0;
padding:0;
display:inline-block;
}
footer p.divider{
margin:0 20px;
}
HTML:
<body>
<div id="wrapper" >
<header>
header header
</header>
<menu> Menu menu</menu>
<section>
section section
</section>
<footer>
<p>x</p><p class="divider">~</p>
<p>x</p><p class="divider">~</p>
<p>x</p><p class="divider">~</p>
<p>x</p>
</footer>
</div>
</body>
The div#wrapper has height:100% and padding:20px 15px 0px 15px making it 100% + 20 pixels. if you add
box-sizing:border-box;
to div#wrapper the padding will be inside the 100%, and the scroll bars disappear.
A non-css3 alternative is to place an element at the top of the inside of the div#wrapper with a height of 20 pixels. Perhaps add the 20px top padding to the header element which is inside the wrapper for non CSS3 browsers.
a. Does your body have to have the height and width assigned? Couldn't you simply set the background. It should automatically span any width non-dependent on the user's screen.
b. You could set the body to position: absolute; left: 0; right: 0; top: 0; overflow: hidden;
This should allow your body to expand in height as needed.
c. You could assign an actual height in pixels, or em . Something like 700px should not go off the screen, but of course that would change if the user is mobile.
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;
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'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?