i have been trying to implement a bottombar for my site, however the vision i have seems to me to be rather difficult. Maybe you can enlighten me?
I want to have a bottombar that sits at the bottom of the browser window if the content does not spill over the edge, but if the content does spill over i want the bottombar at the bottom of the content.
I would prefer if it was CSS solution but it might be better/easier in something else, i dont know. Also no PHP.
I hope you understand me.
And thanks in advance for any answers.
Have you looked at http://www.cssstickyfooter.com/
Assuming the height of the bottom bar is fixed it's fairly simple. eg.:
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#content { min-height: 100%; }
* html #content { height: 100%; } /* IE6 hack */
#trailer { height: 2em; margin-top: -2em; background: yellow; }
#pad { height: 2em; }
</style>
</head><body>
<div id="content">
Content content content content content content content content content content content.
<div id="pad"></div>
</div>
<div id="trailer">
Bit at the bottom.
</div>
</body></html>
Something like this will do the trick, (note that the extra wrapping div with some padding-bottom is required in order to make sure the footer does not overlap the contents),
<html>
<head>
<title>Sticky Footer Test</title>
<style>
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
* {
margin: 0px;
}
#container {
min-height: 100%;
height: auto !important;
height/**/: 100%; /* for IE6 */
background: #ddd;
}
#footer {
position: relative;
background: #555;
margin-top: -100px;
height: 100px;
}
#content {
padding-bottom: 100px;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<p>Hello! I'm some content!</p>
</div>
</div>
<div id="footer">
<p>Hello! I'm a footer!</p>
</div>
</body>
</html>
Related
I know this is a duplicate question, I've read through many questions on this particular question like this one.
But I can't for the life of me get mine to work. I've tried many combinations of height and min-height for my html and body, using both % and vh. I tried setting the margin to 0 as well but that doesn't help. I tried this on both Chrome and Firefox, neither browser works. There were some answers that suggested using position: absolute but that messes up the styling for all the content I have.
Some combos I tried:
html, body{
height: 100%;
min-height: 100%;
}
html{
height: 100%;
}
body {
min-height: 100%;
}
html{
height: 100%;
margin: 0;
}
body {
margin: 0;
min-height: 100%;
}
My HTML layout:
<html>
<head>
... stuff
</head>
<body class=".container">
... stuff
</body>
</html>
You can use a fixed position for the bottom, but that can leave you with display problems as content gets covered.
I recommend using something like
body {
height: calc(100vh - 100px);
}
if you want to leave 100 px for your header and footer
What you're looking for is position: fixed, which tells the element to be fixed to that location, regardless of the other content. Couple this with bottom: 0, to state that the element should be fixed to the bottom of the page:
body {
margin: 0;
}
div {
padding: 5px;
}
.container {
background: #DDD;
height: 50px;
}
.footer {
position: fixed;
bottom: 0px;
height: 20px;
width: 100%;
background: #DDD;
}
<body>
<div class="container">Text</div>
<div class="footer">Copyright</div>
</body>
Hope this helps! :)
Solution :You can use the html 5 elements like
Header,
Article,
Section,
Footer
And set there height and width according to your requirements...
you can use this code to create a fixed footer at the bottom of your page
.yourfooterclass {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
basically what this is doing is positioning the footer at the very bottom of the page, so it doesnt matter how much content you have on the page it will always be at the bottomn
Since I couldn't change anything on the height-property of the body, I found this solution at https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/1, also pure CSS:
The html structure:
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="page-container">
<div id="content-wrap">
<!-- all other page content -->
</div>
<footer id="footer"></footer>
</div>
</body>
</html>
And the CSS accordingly:
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 2.5rem; /* Footer height */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem; /* Footer height */
}
I am attempting to make a standard website layout with a header, a navigation bar a body (on the right of the navigation bar) and a footer.
Now I have so far done this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
.header {
float: top;
width: 100%;
height: 75px;
}
.navbar {
float: left;
width: 20%;
height: 100%;
height: 100%;
min-height:100%;
overflow: scroll;
}
.body {
float: right;
width: 80%;
height: 100%;
min-height:100%;
overflow: scroll;
}
.footer {
float: bottom;
width: 100%;
}
</style>
</head>
<body>
<div class="header"> Header </div>
<div class="navbar"> Nav Bar </div>
<div class="body"> Body </div>
<div class="footer"> Footer</div>
</body>
</html>
which produces this:
Now if we check the CSS:
.navbar {
float: left;
width: 20%;
height: 100%;
min-height: 100%;
overflow: scroll;
}
.body {
float: right;
width: 80%;
height: 100%;
min-height: 100%;
overflow: scroll;
}
As you can see I have tried to set the height and min-height of both the body and nav bar to fill the remaining vertical space i.e:
Yet it doesnt affect it. However if I do height: 500px it resizes like expected (of course this now wont be very good practice as different screen sizes etc would show a different portion or view of the page):
So basically I am asking how would I be able to make the divs fill the vertical space that's left over without using some hard-coded value i.e 100px rather I would want to do it in percentages thus the page will look the same on all browsers
add this code to your body,html:
body,html{
height:100%;
}
and make your navbar <div id="navbar"> instead of <div class="navbar">
then add height: 100%; to your navbar
#navbar{
height:100%
// rest of your code
}
Same to your content
call it something like content, because body is already used.
#content{
height:100%
// rest of your code
}
now all the divs will have a height of 100% so the full browser height.
EDIT: your full code would look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body{
padding: 0;
margin: 0 auto;
height: 100%;
}
#header {
width: 100%;
height: 75px;
}
#navbar {
float: left;
width: 20%;
height: 100%;
min-height:100%;
overflow: scroll;
}
#content {
float: right;
width: 80%;
height: 100%;
min-height:100%;
overflow: scroll;
}
#footer {
width: 100%;
}
</style>
</head>
<body>
<div id="header"> Header </div>
<div id="navbar"> Nav Bar </div>
<div id="content"> Body </div>
<div id="footer"> Footer</div>
</body>
</html>
Use absolute positioning for each content block (header, footer, sideber, body), and for the body and nav-bar divs, set both top and bottom position properties, rather than specifying the height property. This will force them to fill the remaining viewport height.
More detail here
...and for supporting IE5 and IE6, here's an improved version using only CSS (no javascript).
I am brand new to CSS so please forgive me if this is a foolish problem.
I have created a footer with 3 embedded div's of 33.33% of the width inside of it. For some reason the text that I am putting into each div is half in and half out of the bottom of the div. This is driving me insane. Could someone please explain why this is happening?
Here is my XHTML:
<! DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 strict//EN" "http://www.3org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="EN" dir="ltr" xmlns="http://www.w3org/1999/xhtml">
<head>
<meta http-equiv="content-type"
content="text/xml; charset=utf-8" />
<title>www.BLeeOBS.com</title>
<link rel = "stylesheet"
type = "text/css"
href = "twoCol.css" />
</head>
<body background="images/brick.jpg">
<div id="body">
<div id="head">
<h1>B. Lee Oil Burner Service</h1>
</div>
<div id="head_right">
<h1></h1>
</div>
<div id="left">
<h2></h2>
</div>
<div id="right">
<h2></h2>
</div>
<div id="footer">
<div id="footer1">
<h3>Fully Insured</h3>
</div>
<div id="footer2">
<h3>HIC# PA088378</h3>
</div>
<div id="footer3">
<h3>©2013</h3>
</div>
</div>
</div>
</body>
</html>
Here is my CSS:
#body {
margin-left: auto;
margin-right: auto;
background-image: url("images/bggradient.jpg");
text-align: center;
background-repeat: repeat-x;
width: 768px;
height: 1024px;
}
#head {
background-image: url("images/horizontalpipe.png");
background-repeat: repeat-x;
float: left;
height: 90px;
width: 678px;
}
#head_right {
background-image: url("images/elbow.png");
float: left;
width: 90px;
height:90px;
}
#left {
float: left;
height: 904px;
width: 678px;
}
#right {
background-image: url("images/verticalpipe.png");
background-repeat: repeat-y;
float: left;
width: 90px;
height: 904px;
}
#footer {
background-color: gray;
color: white;
height: 30px;
width: 768px;
clear: both;
}
#footer1 {
height: 30px;
float: left;
width: 33.33%;
}
#footer2 {
height: 20px;
float: left;
width: 33.33%;
}
#footer3 {
height: 20px;
width: 33.33%;
float: left;
}
my page can be viewed here to see what's happening:
http://www.bleeobs.com/bricksswf.html
the white text should be entirely in the grey box (my div) but as you can see it is halfway out.
Also, I'd like to bring the text "B. Lee Oil Burner Service" a little bit higher in the header. Setting the padding doesn't seem to help at all.
Any help would be greatly appreciated.
I'm not sure why but the margins are being set by "user agent stylesheet" I see here:
THe immediate fix is setting
h3 { margin: 0 }
or however you want it. According to this Chrome user agent stylesheet overwriting my site style you might want to look into the correct fix. It may be having the desired at the top of your document (perhaps for html 5)or it might be broken css somewhere.
edit: Looks like Adrift might be correct about the default browser styles needing to be reset. You can use a reset.css like he's suggesting.
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/
Im trying to do layout that has header, content and footer. Footer must be bottom of the page(done). But my problem is how can I get content 100% strech between header and footer. When my content is empty, then I can't see that, but when I'm writing some word to html in to content div, like "hello", then the content is only so long than the content in content. I guess you can understand what I mean.
Can somebody explain what is wrong in my css code.
Red is header, green is footer, cyan is content and blue is container. Problem is that Content does not cover the container area.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Praktika1</title>
<link rel="stylesheet" href="style1.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
CSS:
#CHARSET "UTF-8";
*{padding:0; margin:0;}
html,body{
height:100%;
}
#container{
width: 1024px;
position:relative;
background-color:#cce;
margin: 0 auto;
min-height:100%;
}
#header{
width: 1024px;
height:100px;
background-color: #CCC;
}
#content{
height:100%;
width:1024px;
background-color:yellow;
}
#footer{
width: 1024px;
height: 100px;
position:absolute;
bottom:0;
background-color: #ced;
}
You're in luck. I spent a good amount of time yesterday figuring out a question similar to this.
http://andrew.x10.mx/rene/
html -
<div id="container">
<div id="header">
<div id="header-content">
Hai der. I'm a header.
</div>
</div>
<div id="content">
<h1>Content here</h1>
<div id="footer">
<div id="footer-content">
I'm a footer lol
</div>
</div>
</div>
</div>
css -
html,body {
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
#header {
background: #0f0;
top: 0;
left: 0;
position: absolute;
width: 100%;
}
#header-content {
padding: 10px;
}
#container {
background: #ff0;
height:auto !important;
height:100%;
position:relative;
width: 1024px;
text-align: left;
margin: 0 auto;
min-height:100%;
}
#content { padding: 20px 10px; }
#footer {
background: #f00;
bottom: 0;
left: 0;
position: absolute;
width: 100%;
text-align: center;
}
#footer-content { padding: 10px; }
Hard to tell without the HTML, but I would try to add a min-height of %100 to #content
One solution would be this:
#content{
background-color:yellow;
position:absolute;
top:100px;
bottom:100px;
width:100%;
}
You could use absolute positioning on all three parts of the page (header, content, footer):
Live demo: http://jsfiddle.net/bBEJ6/
Perhaps a margin-bottom: 0 px could work?
Your question is worded very poorly, but from what I can see you want your content to fill up 100% of your page, yet you have specified a specific width on your #content section by using the width:1024px property.
Try width:100% and see if this solves your problem.