Right now I have something like this:
<div id="pagebody">
<div id="left-entries"> </div>
<div id="right-entries"> </div>
</div>
<div id="footer">
....text....
</div>
left-entries and right-entries have float: left; so that they show up beside each other within pagebody.
pagebody has margin-left: auto; margin-right: auto; so that it sits in the center.
How can I get footer to ALWAYS show up under pagebody? Right now it is positioned somewhat behind everything. I have a feeling it is because pagebody doesn't have a defined height (because the height is defined by what is inside it and that's variable depending on the content).
Any ideas?
If you add clear:both; to #footer it will always be below the pagebody
I would recommend clearing your floated DIV's. You can do this by adding a "clear" class any parent elements that contains any floated children. I think this works best, because it's less markup in your HTML. (via Nicolas Gallagher)
For example:
<style>
.clear:before, .clear:after { content:""; display:table; }
.clear:after { clear:both; }
.clear { zoom:1; } /* IE 6/7 (hasLayout) */
</style>
<div id="pagebody" class="clear">
<div id="left-entries"> </div>
<div id="right-entries"> </div>
</div>
Should clear anything below the #pagebody DIV.
You have to clear it.
clear: both;
Related
I can not get my yellow background color to show up with the nested divs that show up in 3 separate columns. What am I doing wrong?
<div id="wrapper">
<div class="rightside">
Test
</div>
<div class="rightside">
Test
</div>
<div class="rightside">
Test
</div>
</div>
CSS below:
#wrapper {
background-color: yellow;
}
div.rightside {
width: 31%;
margin: 0 1.33333em 0 0;
display:inline;
float:left;
}
Here is my jsfiddle: http://jsfiddle.net/yPX5Q/2/
Thanks
Cheers
Add overflow:auto to your wrapper div
#wrapper {
background-color: yellow;
overflow:auto;
}
jsFiddle example
Floating the inner divs essentially gives the wrapper div no height. By adding the overflow:auto it brings back the expected behavior.
you can set overflow:hidden; http://jsfiddle.net/yPX5Q/3/ on the parent container or use a clearfix method with a pseudo element or extra element.
More info about floatting elements here : http://css-tricks.com/all-about-floats/
I need to bump my footer down to the bottom of the page, regardless how much content is on the page above it. So I did some search on the internet and found one solution according to this site:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
However, everything works OK until I applied "float:left" to the content div. The footer is no longer on the bottom and got bumped up half way. My question is, How to keep the footer down when there is floating in the div above?
Please see this jsfiddle here for my example:
http://jsfiddle.net/mEuke/5/
or code here:
<style type="text/css">
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
</style>
<div id="container">
<div id="header"></div>
<div id="body">
<div id="test" style="float:left">
blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
</div>
</div>
<div id="footer"></div>
</div>
You need to use a clearfix on the the container of the floated children
Here is a modern clearfix that works in modern browsers.
#body:after { /* #body is your container */
content: "";
display: table;
clear: both;
}
This will solve your problem
Demo: http://jsfiddle.net/mEuke/7/
For a cross browser clearfix read this Article: http://css-tricks.com/snippets/css/clear-fix/
What is a clearfix?
A clearfix is a way for an element to automatically clear after itself, so that you don't need to add additional markup. It's generally used in float layouts where elements are floated to be stacked horizontally.
The clearfix is a way to combat the zero-height container problem for floated elements.
Source: What is a clearfix?
I want to create a <div> element with background color, which starts in the middle of the screen and goes to the right, to the end of the page (out of screen) , but I don´t want to trigger any scroll bar. In that <div> I want to have some information, at the beginning of that <div>(within the screen). Here´s the HTML code example:
<div id="footer">
<h2>Information</h2>
<p>Some text</p>
<p class="alignright">Another information in this paragraph.</p>
</div>
This is how I want it to look like:
http://postimage.org/image/h60apjfjf/
CSS will let you do this easily. Something like the following:
#footer {
background-color: #b0c4de;
width: 50%;
height: 20px;
float: right;
}
This is a pretty good resource: http://www.w3schools.com/css/default.asp
Can´t you just use css background-image of the body to achieve that effect?
You can do this by wrapping the footer div in another div. This will not only allow you to fully position the footer div but it will also allow you to put the footer div outside without generating a scrollbar or showing the overflow.
For example:
<div id="footer-wrapper">
<div id="footer">
<h2>Information</h2>
<p>Some text</p>
<p class="alignright">Another information in this paragraph.</p>
</div>
</div>
#footer-wrapper { width:300px; height:100px; position:relative; overflow:hidden; }
#footer { position:absolute: top:50px; left:50%; width:300px; }
etc.
The position:relative means that the footer div, with position:absolute, will use the wrapper as the position reference. Overflow:hidden will prevent scroll bars and will hide the overflow.
You can do something like that :
#footer {
float: right;
width: 50%;
background-color: blue;
overflow: hidden;
}
The overflow hidden isn't necessary but in case a scrollbar appears, with this it won't.
EDIT: example: http://jsfiddle.net/8nu68/
I typed this
#center-1, #center-2, #center-2, #center-3, #center-4,
#center-5, #center-6, #center-7, #center-8 { float: left; width:360px; }
HTML:
<div id="centerColumn">
<div id="center-1"></div>
<div id="center-2"></div>
<div id="center-3"></div>
<div id="center-4"></div>
<div id="center-5"></div>
<div id="center-6"></div>
<div id="center-7"></div>
<div id="center-8"></div>
</div>
and it doesn't work, why?
Guessing from your report that it "doesn't work", you're probably just not seeing the divs because there is no content, height, or padding. Add height:10px; or something, and some background - they will show up.
By the way, there's a slightly easier way to write this selector in your case:
/* Select all <div>s in the #centerColumn */
#centerColumn div {
float: left;
width:360px;
/* Test to make divs appear */
background:#f00;
height:10px;
margin:1px;
}
your divs do not have any content, that's why they are not visible. to make them visible add at least a into them, or add height/min-height to the css rule
How can I build a fixed footer like facebook application design? Examples with css appreciated.
Duplicate of Facebook like status div
One way is given here:
In HTML:
<div id="container">
<div id="content"></div>
<div id="footer"></div>
</div>
In CSS:
#container {
position:absolute;
min-height:100%;
}
#content {
margin-bottom:100px; /* same as footer height */
}
#footer {
position:absolute;
bottom:0;
height:100px; /* same as content margin-bottom */
}
Edit: That link was based on this which has some exceptions
Facebook's footer stays in place as you scroll. To accomplish this, you'll need HTML like this:
<body>
<div id="content">
[content]
</div>
<div id="footer">
[footer]
</div>
</body>
and CSS like this:
#footer {
position: fixed;
bottom: 0;
width: 100%;
background: #f00;
}
The CSS position: fixed instructs the browser to keep this element's position fixed, regardless of scrolling.
I have found CSS Play a really helpful site.
http://www.cssplay.co.uk/
More specifically, http://www.cssplay.co.uk/layouts/, for layouts.
More examples at CSS Sticky Footer.
Edit: Another example with slightly cleaner CSS