I'd like to have a div floated to the left that is fixed but still another div float next to it (i.e., two coumns, but the left-most remains in place when page is scrolled).
As far as I've been able to tell, fixed and position don't mix, and one can only do this by, e.g., adding a margin-left to th second (right-most) div to achieve this, (like this)
But, I retain a glimmering hope I bring here to be either stoked or snuffed out.
So, I'd like to change the css here so that I can take out the margin-left tag and just have that #body div float up against the #menu one:
<!DOCTYPE html>
<html>
<head>
<style>
#menu
{
float:left; width: 10em; position: fixed;
}
#body
{
float:left; maring-left: 10em;
}
#footer
{
clear:both;
}
</style>
</head>
<body>
<div /*main div others are nested in*/>
<div id="menu">
menu<br/>menu<br/>menu<br/>menu<br/>menu<br/>menu<br/>menu<br/>menu<br/>menu<br/>menu<br/>menu<br/>menu
</div>
<div id="body">
<p>
body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body
</p>
<div id="footer">
footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer
</div>
</div>
</div>
</div>
</body>
</html>
Thank you all for any help!
spelling error on margin left
ttp://jsfiddle.net/BYMZD/
Related
I want my footer to stick to the bottom of the page, so when the page is smaller than the screen, the footer should be on the bottom anyways. But it should not conflict with margin in the css file. So it should not mess up the page when I use margin for some stuff.
You just need to create wrapper div and get out footer from there. Then make margin-bottom in this wrapper equal footer height and create some push div - it will be place for footer.
Look at this: http://jsfiddle.net/PXYSk/4/
Try using fixed position and the css3 calc() function:
JSFiddle
Just set the footer to position: absolute and bottom: 0.
This is a good example how to create sticky footer, but you need fixed height for footer block:
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px;
}
.footer, .push {
height: 50px;
}
HTML:
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
I am completely new to html and css so my question could be very basic but hope you guys can help me udnerstnad,
I am using following css code
body
{
background-color:Olive;
width:550px;
font-family:Verdana;
}
I am setting width to 550px and as a result all my paragraphs contract to 550px but the background is applied to the whole page even beyond the 550px
I understand that because of inheritance the child elements would have inherited the width property from body, but I was thinking that if I set width property of body to 550px then background should be visible in 550px wide area and not the full page,
I don't get the logic here..
If you apply a color to the html, for example html { background-color: yellow; }, you'll see this is not the case at all. The <body> tag is special in that it is intended to encompass the entire contents of the HTML page. When you apply a background, then, the default is for it to paint the entire background page, unless htmls background has otherwise been set.
See this jsfiddle example. Like the other posters above, I highly recommend using a <div> element to wrap, size, and color your content.
This is described in the CSS2 specifications as so:
The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for 'background-position') at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.
Why not wrap your content in a div, and set the properties to that?
<body>
<div class="content">
... content here
</div>
</body>
and apply the same classes to the div
.content
{
background-color:Olive;
width:550px;
font-family:Verdana;
}
You can use a container div that wraps your whole page and acts like a "fake" body. Then if you apply these style to this div your problem will be solved.
css
#wrapper {
width: 550px;
margin: 0 auto;
text-align: left;
}
HTML:
<body>
<div id="wrapper">
Piece of text inside a 550px width div centered on the page
</div>
</body>
You should try this http://jsfiddle.net/ajaypatel_aj/8tfKc/
HTML
<div id="wrapper">Test me!</div>
CSS
*{
margin:0;
padding:0;
}
body{
text-align:center; /*For IE6 Shenanigans*/
font-family:Verdana;
}
#wrapper{
width:550px;
margin:0 auto;
text-align:left;
background-color:Olive;
}
Answer is simple applied body color will set to whole page you must have to use div .
This is what you are looking for.
<html>
<head>
<title>
Your title goes here.
</title>
</head>
<style type="text/css">
#test
{
background-color:Olive;
width:550px;
font-family:Verdana;
}
</style>
<body>
<div id='test'>
Hello
</div>
</body>
Another answer is:
<html>
<head>
<title>
Your title goes here.
</title>
</head>
<style type="text/css">
html
{
background-color:white;
}
body
{
background-color:Olive;
width:550px;
font-family:Verdana;
}
</style>
<body>
Hello
</body>
</html>
I have a set height footer div that fills the bottom of the screen, 100px wide, with a black background it sits over a body Back ground image. There are a few pages with not a lot of content. The footer rises up the page and because it has a fixed height, under the footer you see the body BG image. How would I go about using CSS to make sure that the whole screen below the raised footer is black, without having to extend the set height of the footer div?
You can give "min-height" to the pages that .So, although content is little, the footer will be same.Since content area has "min-height"
You can have a look at here for "min-height"
And here is sample code;
.content {
min-height: 600px;
}
There are some published solutions to this. The core of them all seems to be applying minimum heights (including some hacks for earlier versions of IE) to a block-level element that wraps all non-footer content and has a padding equal to the footer's height. The footer then has its height and negative top margin set explicitly (to the same value as the wrapper's bottom-padding.
Code example from the CSS Sticky Footer solution.
HTML:
<body>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>
</body>
CSS:
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
I've set up my problem here.
I have 2 divs, each outlined with a black border. One is my content div (containing text), with height set to 600px; The other div, containing a banner image, I'd like to use as my page's footer. I am able to do this in absolute positioning by simply marking the div with "bottom: 25px." However, what I'm hoping to do is to make the footer div "stop" when it collides with the content div as you shrink the size of your browser window.
Any ideas? Thanks much in advance!
Here's how I do it. Got the technique from http://ryanfait.com/sticky-footer/. He adds an extra "push" div but I used the wrapper's padding bottom to serve the same function (no need for empty DIVs).
Here's an example (you can view it at http://ve.savantcoding.com/example.html)
<html>
<head>
<title>sample footer</title>
<style type="text/css">
* {
margin: 0;
}
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -200px; /* bottom margin is negative footer height */
}
#content {
padding-bottom: 200px /* bottom padding is footer height */
}
#footer {
height: 200px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">your content</div>
</div>
<div id="footer">your banner</div>
</body>
</html>
I've found 2 different implementations of a CSS sticky footer:
Ryan Fait sticky footer - http://ryanfait.com/sticky-footer/
Steve Hatcher sticky footer - http://www.cssstickyfooter.com/
Could someone explain the difference between how each of them work?
And if there are other known implementations, could you please post a comment or edit this question?
They are pretty similar in terms of function. The first forces a div to the full height of the page and then give it a negative margin the size of the footer.
html, body {
height: 100%; /*set 100% height*/
}
.wrapper {
min-height: 100%; /*content 100% height of page */
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* negative value causes wrappers height to become (height of page) minus 142px, just enough room for our footer */
}
.footer, .push {
height: 142px; /*Footer is the footer, push pushes the page content out of the footers way*/
}
What this does is makes sure that all content within the wrapping div is 100% of the page height minus the height of the footer. So that as long as the footer is the same size as the negative margin it will stick in the gap left and appear at the bottom of the element.
The second also forces the content to be 100% of the height of the page.
html, body {height: 100%;} /*set 100% height*/
#wrap {min-height: 100%;} /* make content 100% height of screen */
It then creates a space at the bottom of the main content the same size as the footer.
#main {overflow:auto;
padding-bottom: 150px;} /* wrapper still 100% height of screen but its content is forced to end 150px before it finishes (150px above bottom of screen) */
Then using position relative and a negative top margin forces the footer to appear 150px above its normal position (in the space it just made).
#footer {position: relative;
margin-top: -150px; /* Make footer appear 150px above its normal position (in the space made by the padding in #main */
height: 150px;
clear:both;}
Note: This only works so long as your page content is kept within .wrapper and #main inside #wrap respectively, and your footer is outside of these containers.
If you didn't understand any part of that leave me a comment and I'll try to answer it.
Edit: In response to user360122
HTML markup for first:
<html>
<body>
<div class="wrapper">
<!--Page content goes here-->
<div class="push">
<!--Leave this empty, it ensures no overflow from your content into your footer-->
</div>
</div>
<div class="footer">
<!--Footer content goes here-->
</div>
<body>
</html>
HTML markup for second:
<html>
<body>
<div id="wrap">
<div id="main">
<!--Page content goes here-->
</div>
</div>
<div id="footer">
<!--Footer content goes here-->
</div>
</body>
</html>
Remember to include the stylesheet and declare doctype .etc (these aren't full html pages).
There is an example in the bootstrap documentation which seems to be very simple: http://getbootstrap.com/examples/sticky-footer/
No wrapper or push needed.
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}