why my footer css wont take the full Edge with 100% ?? there is a white space on left. how do i fix this ?? before when i use 100% width , the footer take full 100% but now it have white space every time i use footer. can any one tell me why?
the footer also wont stick to below. i always need to use position to fix it.
<html>
<head>
<style>
footer{
width:100%;
height:50px;
background-color:blue;
}
</style>
</head>
<body>
</body>
<footer>
i am footer.
</footer>
</html>
The body has a default 8px margin so you need to remove that.
body {
margin: 0;
}
That should remove that space. You'll probably want to add some padding to your footer as well or your footer content will run right to the edge of the screen.
For the positioning of the footer...you'll need to put some content above it so it pushes down, or apply absolute positioning to fix it to the bottom, or add a 'min-height' declaration on the content area so it has height regardless of whether there is content or not.
body and other elements have margin by default
use
body{margin:0;}
how will footer go down if you dont have any content above it?
use absolute position that will work in your case
footer{
width:100%;
height:50px;
background-color:red;
position:absolute;
bottom:0;
}
Related
I have an element with id "div1", and in CSS:
body {
min-width:50em;
margin:0;
padding:0;
}
#div1 {
position:absolute;
right:20em;
}
and if I resize the window til the width of window is less than the min-width of the body, the right side of div1 is still 20em towards the right side of window rather than the right side of the body.
I figure it out that if I add a global container, which means
<body>
<div id="global_container">
...
</div>
</body>
And in CSS, set the global_container's position as relative, then I can get the right to be right.
But I don't think this way is the standard way to this problem.
I am playing around with bigcommerce at the moment and I am trying to recreate the footer structure for the header. You can see here:
http://thespeedfactory.mybigcommerce.com/
If you look at the footer, how it is full width but the content is central within it.
I want the header to be exactly the same, black with pink/white highlights.
Ive tried moving around the structure within bigcommerce, but I am having a brain failure in getting it to do and look how I want despite knowing it is based around containers and margins.
Any guidance is appreciated.
If I understand you correctly, you want:
the header (#Header) to span the entire width of the page
the footer (#ContainerFooter) to span the entire width of the page
the header (and footer to have the same styling (colors, etc.)
the content area (#Wrapper) to stay a fixed width and centered on the page
To do this, add the following css:
#Container {width:100%;}
#Header {width:100%; margin:0, auto;}
The above css allows the header (by way of its parent container) to stretch the width of the browser page. You'll notice #Wrapper is shifted to the left. Add this:
#Wrapper {margin:auto;)
This centers the #Wrapper.
Your structure should be in place and now you can add your colors, etc. to the #Header to make it match the footer.
This is pretty basic html/css.
Just create a div, place a container in it and start styling.
HTML:
<div id="header">
<div id="container">
<p>content</p>
</div>
</div>
CSS:
#header {
width: 100%;
height:400px;
background:black;
position:absolute;
border-top:3px solid #ff25a7;
}
#container {
width:90%;
height:300px;
margin:0 auto;
}
#container p {
font-size:30px;
padding:10px;
color: #ff25a7;
}
Here's a jsFiddle to help you get started.
You can try giving the header the same class as the footer and afterwards (if the footer's position is absolute bottom), set the position to absolute top:0px;
I am currently working on a site that requires a footer to be placed either at the bottom of the window, or the bottom of the page content, whichever is lower. I have tried using the height: 100% method, but this causes a problem.
I also have a position: fixed header, and some padding on my content (defined in pixels). Also, the height of the content may change after the page has loaded (use of accordions, etc.), so I wonder if there's a pure CSS way to position the footer to either the bottom of the window, or the bottom of the document, while still allowing pixel padding and so forth.
Here's an outlined structure of the HTML:
<header></header>
<div class="content">
<footer></footer>
</div>
I have also put together a Fiddle to demonstrate how the CSS works at the moment: http://jsfiddle.net/LY6Zs/. I am unfortunately unable to change the HTML structure (i.e. breaking out the footer element from .content.
You first need to have a container div just after the which contains all the content
.container
{
min-height:100%;
position:relative;
margin:0 auto;
}
.footer{
position:absolute;
bottom:0;
}
I have a menu bar that I want to place at the bottom of my screen. I've set the positioning to absolute and the distance from bottom to '0', but for some reason, it won't move from the middle of the screen, regardless of how I try to position it. Can anyone catch what I am doing wrong?
<div class=bmenu>
<img src="bottommenu.gif" width=100% height="39" alt="" />
</div>
<style>
.bmenu
{
position:absolute;
z-index: 2;
bottom:0;
left:0;
width:100%;
}
</style>
Edit:
Several commenters have said that this code places it at the bottom for them. Does this mean that the problem is coming from the way this code fragment is interacting with the rest of the code? Does anyone know what could cause that?
If you use any of the browser's web inspectors, you'll see that the height of your <html> and <body> elements aren't 100%, but auto, which means they'll only be as tall as the content within them expands them to.
What you need to do is set the height of these elements, like so:
html, body {
height: 100%;
}
This will force them to fill the full height of the viewport. The only caveat is that this requires you to define margin-top, margin-bottom, padding-top and padding-bottom on other elements, since margins and paddings will be added on top of the height, which is not what you normally want when defining height (or width, for that matter) in %.
try to use this code:
.bmenu
{
position:fixed;
z-index: 2;
bottom:0;
left:0;
width:100%;
}
I am making the layout of a web page that I want it to have the same look in all screens. The page I am working on, has three parts, header, main, and footer, which I want to header to be on the top of the screen. main and footer sticks to the bottom of the page.
Here is what I want to do:
I made the header to in the top but I couldn't add percentage to the main and footer section.
Also in the header there is a div which called 'div5', I want it to sticks at the bottom of the parent div which is main or middle box.
in the footer I have three boxes which want to have them in left, right and center.
Can you have a look at the linked site and let me know how to fix these problems.
percentage heights only work if you set the parent element to have a height.
( the elements will ask "percentage of what?" )
Here we set a height to the body
css
<style type="text/css">
html,body { height:100%;}
#header { display:block; height:10%; }
#main { display:block; height:80%; }
#footer { display:block; height:10%; }
</style>
markup
<body>
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
</body>
By doing these you are making you div 2,3 & 4 overlap. make sure that even that is taken care of. and Yes you must consider an option of Css media queries. Please go through the demo here