Can someone explain me why the first code does result in a fixed footer with a small margin on the right as I used an extra 'div' but that without this as seen in the second code it doesn't show a margin on the right? Thanks!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {
width: 100%;
margin: 0px auto;
}
.mymargin {
clear: both;
position: fixed;
bottom: 0px;
text-align: right;
width: 100%;
background-color: fuchsia;
}
footer {
margin-right: 20px;
}
</style>
</head>
<body>
Look in the right corner below!
<div class="mymargin">
<footer>
fixedfooterwithmargin-ontheright
</footer>
</div>
</body>
</html>
Second code without an extra div.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {
width: 100%;
margin: 0px auto;
}
footer {
clear: both;
position: fixed;
bottom: 0px;
text-align: right;
width: 100%;
background-color: fuchsia;
margin-right: 20px;
}
</style>
</head>
<body>
Look in the right corner below!
<div class="mymargin">
<footer>
fixedfooter NO hmargin-ontheright
</footer>
</div>
</body>
</html>
Try right instead of margin-right:
footer {
clear: both;
position: fixed;
bottom: 0px;
text-align: right;
width: 100%;
background-color: fuchsia;
right: 20px;
}
jsfiddle: http://jsfiddle.net/ashishanexpert/3eFPt/
Your footer tag is already taking 100% of the width.. So margin will be out of it.
It worked in the first case because you gave the width to the parent. so margin on the child worked. try to add 100% to footer in first case and even that wont work as required.
Related
I am trying to create a sticky footer but I'm getting empty space above and below my header & footer.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
header {
background-color: orange;
position: relative;
height: 400px;
width: 100%;
color: white;
text-align: left;
}
footer {
background-color: #202020;
color: white;
position: absolute;
width: 100%;
height: 60px;
bottom: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Porfolio</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<header>
<h1>header</h1>
<p>header</p>
</header>
<div class="wrapper">
content
</div>
<footer>
footer
</footer>
</body>
</html>
What is the best way to create a sticky footer?
Can anyone explain why I've got this space appearing above header & below footer when I have content (h1 p) in in my header section.
For the header gap, your h1 and p tags have a default padding and margin, you may want to remove them or reduce them to your liking
h1, p {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
h1,p {
padding: 0;
margin: 0;
}
header {
background-color: orange;
position: relative;
height: 400px;
width: 100%;
color: white;
text-align: left;
}
footer {
background-color: #202020;
color: white;
position: absolute;
width: 100%;
height: 60px;
bottom: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Porfolio</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<header>
<h1>header</h1>
<p>header</p>
</header>
<div class="wrapper">
content
</div>
<footer>
footer
</footer>
</body>
</html>
A "sticky" div can be achieved using position: fixed; in your footer CSS. Fixed means that the on-screen position will never change. Or rather you should follow the instructions posted there.
Concerning the space, it is probably because of the default styles applied to h1. Use a debugger to see those default styles and override them with your custom css.
Firefox and Chrome have built in debuggers that also let you view styles and are very efficient for debugging. Usually right click > "inspect element" then go for the CSS tab which lets your select and see styles applied to elements.
In your example, you are not "resetting" the h1 and p tags. By default these elements have some extra margin.
Try adding the following code to your css.
h1, p {
margin: 0;
}
Also check out the HTML5 CSS Sticky Footer.
you may use flex prperties
.wrapper may scroll, header & footer are sticky
/* demo purpose */
.wrapper:hover:before {
content:'test';
display:block;
height:1000px;
}
/* end demo purpose*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
display:flex;
flex-flow:column;
}
header {
background-color: orange;
position: relative;
width: 100%;
color: white;
text-align: left;
}
footer {
background-color: #202020;
color: white;
width: 100%;
height: 60px;
bottom: 0;
}
.wrapper {
flex:1;
overflow:auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Porfolio</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<header>
<h1>header</h1>
<p>header</p>
</header>
<div class="wrapper">
content
</div>
<footer>
footer
</footer>
</body>
</html>
or just footer is sticky ?, needs an extra imbrication
/* demo purpose */
.wrapper:hover:before {
content:'test';
display:block;
height:1000px;
}
/* end demo purpose*/html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body, main {
display: flex;
flex-flow: column;
}
header {
background-color: orange;
position: relative;
color: white;
text-align: left;
}
footer {
background-color: #202020;
color: white;
height: 60px;
bottom: 0;
}
.wrapper, main {
flex: 1;
}
main {
overflow: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Porfolio</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<main>
<header>
<h1>header</h1>
<p>header</p>
</header>
<div class="wrapper">
content
</div>
</main>
<footer>
footer
</footer>
</body>
</html>
footer {
background-color: #202020;
color: white;
//replace absolute with fixed for sticky footer (as in, it sticks at the bottom.)
position: fixed;
width: 100%;
height: 60px;
bottom: 0;
}
I saw this comment you posted on another answer:
If desktop only, then I would go with fixed positioning; however, iOS has problems rendering fixed positioning at times. – SergeantHacker
Try removing height 100% from body and html.
I know that my question was addressed many time on this site. However, I can't seem to find my answer. I'm trying to create a sticky footer on my pages.My pages are divided in 3 div.
top
middle
bottom
I've created a layout.css file. Here it is:
html,body {
margin: 0;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
height: 100%;
margin: 0 auto;
position:relative;
}
#pageTop {
height: 90px;
}
#pageMiddle {
min-height: 100%;
margin-bottom: -50px;
}
#pageMiddle:after {
content: "";
display: block;
}
#pageBottom, #pageMiddle:after {
height: 50px;
}
I don't understand how to remove the pageTop height from the pageMiddle min-height. This seems to be the issue.
Thanks for your help on this matter.
Hi all and thanks for giving me some pointers. After a few days, I finally got the answer.
Like mentioned above, I had 3 div:
top
middle
bottom
I was trying to apply a sticky footer on my bottom div. without any success.
Here is how I managed to solve this issue.
I inserted the top and middle div in a wrapper div. Having only 2 main divs on my page.
It looks like this now.
Wrapper
top
Middle
bottom
here is the css:
#wrapper{
min-height: 100%;
margin-bottom: -50px;
}
#top {
width:1000px;
margin:0 auto;
height: 90px;
}
#middle {
width:1000px;
margin:0 auto;
}
#wrapper:after {
content: "";
display: block;
}
#bottom, #wrapper:after {
width:1000px;
height: 50px;
margin:0 auto;
}
Here is my html template:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My title</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<div id="wrapper">
<div id="top">Header</div>
<div id="middle">Content</div>
<div id="bottom">Footer</div>
</body>
</html>
It is very simple but it works.
Again thanks for your replies.
This is a fairly basic HTML/CSS question, and I'm sorry I'm having to ask this here (I searched my best!). I've written the following HTML and CSS code, and while the header section is separated by a neat 20 pixels from the article and aside sections, the footer is being separated by only 10 px. In fact, irrespective of the margin I set for the footer, the separation remains 10px. What am I doing wrong?
It would be amazing if you could test this code out in a browser to see what I mean. I'm also inserting a link to a picture below of the skewed margins between the article / aside section and the footer section.
http://cl.ly/image/3M2u1L0x2C0x
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>My Grey Boxes</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div id="wrapper">
<header></header>
<article></article>
<aside></aside>
<footer></footer>
</div>
</body>
</html>
CSS Code
#wrapper {
margin: auto;
width: 940px;
}
body {
background-color: #fafafa;
}
header {
height: 120px;
width: 920px;
display: block;
margin: 10px 10px;
position: relative;
background-color: #c6c6c6;
}
article {
height: 740px;
width: 600px;
margin: 10px 10px;
float: left;
position: relative;
background-color: #c6c6c6;
}
/* Keep scrolling! */
aside {
height: 740px;
width: 300px;
margin: 10px 10px;
float: right;
position: relative;
background-color: #c6c6c6;
}
footer {
height: 120px;
width: 920px;
display: block;
margin: 10px 10px; /* Why is this being ignored? */
background-color: #c6c6c6;
position: relative;
clear: both;
}
Any help will be greatly appreciated! I'm sorry if I'm not following all the community guidelines here - this is my first time posting on StackOverflow, and I'll pick things up soon! Thanks ahead! :)
You need to clear the floats before you get to the footer. Changing your HTML to this will work:
<div id="wrapper">
<header></header>
<article></article>
<aside></aside>
<div style="clear:both;"></div>
<footer></footer>
</div>
I'd like to create a layout that acts like a titlebar from iphone:
I tried to put together the following example, but I'm not sure how to get the middle column to expand in width so it uses all left over space. I can do this in javascript at runtime, but wondering if there's a css solution. Here it is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style type="text/css">
html, body {
margin: 0px;
padding: 0px;
}
#parent {
background-color: #eee;
width: 100%;
}
#colLeft {
background-color: #ff8b8b;
height: 48px;
display: inline;
}
#colMiddle {
background-color: #c9ffc3;
height: 48px;
display: inline;
text-align: center;
}
#colRight {
background-color: #c3d0ff;
height: 48px;
display: inline;
}
</style>
</head>
<body>
<div id="parent" style="width:100%">
<div id="colLeft">left</div>
<div id="colMiddle">title</div>
<div id="colRight">right</div>
</div>
</body>
</html>
Thank you
A simpler way to approach this is to use an HTML structure like this:
<div id="parent" style="width:100%">
<div id="colLeft">left</div>
title
<div id="colRight">right</div>
<div>
Float the left and right divs to the appropriate sides and set the text align on the parent to center. Any styles from the middle div for text, etc can be applied to the parent.
I'm a bit late in the answer, but see if this is more like what you need, without the need to sacrifice the middle <div>:
You'll have to float the 3 columns and make the inner column have a 100% width. Then, setting the inner column's margin (based on left and right columns' widths), you achieve the result.
Have a look at this fiddle: http://jsfiddle.net/fabio_silva/d7SFJ/
The HTML/CSS:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style type="text/css">
html, body {
margin: 0px;
padding: 0px;
}
#parent {
background-color: #eee;
width: 100%;
}
#colLeft {
background-color: #ff8b8b;
height: 48px;
width: 100px;
float: left;
}
#colMiddle {
height: 48px;
text-align: center;
float: left;
width: 100%;
margin-left: -100px; /* negative colLeft width */
margin-right: -150px; /* negative colRight width */
}
#colMiddleInner
{
margin-left: 100px;
margin-right: 150px;
height: 48px;
background: #c9ffc3;
}
#colRight {
background-color: #c3d0ff;
height: 48px;
width: 150px;
float: left;
}
</style>
</head>
<body>
<div id="parent" style="width:100%">
<div id="colLeft">left</div>
<div id="colMiddle">
<div id="colMiddleInner">
title
</div>
</div>
<div id="colRight">right</div>
</div>
</body>
</html>
You need to define the widths...
#colLeft {
background-color: #ff8b8b;
height: 48px;
width: 50px
display: inline;
}
#colMiddle {
background-color: #c9ffc3;
height: 48px;
display: inline;
width: auto;
text-align: center;
}
#colRight {
background-color: #c3d0ff;
height: 48px;
width: 50px;
display: inline;
}
Note: default value for width is auto.
This should be a pretty trivial issue, but it's causing me a bit of a headache.
I have an html layout, summarized with the relevant code below. Basically I have the <section> and <aside> acting as the main content, and the right handed content. I am trying to make sure they will always behave in this manner, regardless of any kind of funky boundaries caused by borders, margins, padding, etc. The solution seemed to be simply setting them to have absolute and relative positioning.
This did achieve my desired result, but I am having trouble with the underlying content. The <article> does not stretch to the right height. Since the height is not always determinable at code-time, giving it a set height is not an option. My intended goal is that the underlying <article> background will stretch to accommodate no matter how high either of the <section> or <aside> panes become. Any ideas?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<style type="text/css">
.container { margin: 0px auto; width: 960px; position: relative }
article {
overflow: hidden;
background-color: Black;
height: auto;
}
section {
width: 675px;
position: relative;
left: 0px;
overflow: hidden;
margin: 10px;
height: 300px;
background-color: Aqua;
}
aside {
width: 260px;
position: absolute;
right: 0px;
top: 0px;
overflow: hidden;
margin: 10px;
height: 500px;
background-color: Fuchsia;
}
</style>
</head>
<body>
<div class="container">
<article>
<section>
</section>
<aside>
</aside>
</article>
</div>
</body>
</html>
As requested, here is the code with faux columns:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Faux column example</title>
<meta charset="UTF-8" />
<style type="text/css">
html, body {
height: 100%;
}
.container {
margin-bottom: 2em;
}
article {
background: #000 url(http://imaginekitty.com/cssExamples/oog.gif) repeat-y;
border: solid 10px #000;
display: block;
margin: 0 auto;
min-height: 100%;
width: 945px;
overflow: hidden;
}
section {
display: block;
float: left;
overflow: hidden;
width: 668px;
}
aside {
float: left;
margin-left: 20px;
overflow: hidden;
width: 255px;
}
</style>
</head>
<body>
<div class="container">
<p>There is no use of absolute or relative positioning here.</p>
<article>
<section>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
</section>
<aside><p>asdf</p>
</aside>
</article>
</div>
<div class="container">
<article>
<section>
<p>asdf</p>
</section>
<aside><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
</aside>
</article>
</div>
</body>
</html>
The reason I mentioned that absolute positioning is, in my opinion, inappropriate in this situation is that it removes elements from the normal document flow which will most likely cause issues with other elements on the page. At best, it's just unnecessary. At worst, you'll pull your hair out trying to figure out problems. :)
A good article on the subject: http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/