Is there any way we can fix the footer to the bottom of the window even at the time of vertical scroll. I have gone through some examples, but those never work with the vertical scroll.
Check out the sample and its google code base
You can set the bottom property to 0. Example:
.footer
{
background-color:#FFFACD;
bottom:0;
position:fixed;
z-index:250px;
}
Here is your css
html, body {height:100%;padding:0;margin:0;}
#footer {position:absolute;bottom:0;left:0;width:100%;background-color:#f00;}
#scrollingbody {overflow:auto;height:100%;}
Here is your html
<div id="scrollingbody">content goes here</div>
<div id="footer">here is footer</div>
Related
So, quickly typing this, so sorry if it's kinda vague/confusing.
So, I have a bar I am using css on the bottom of the screen, and I have a divider above it. I try to use height 100% on the divider to get the height to go all the way to the bottom, but it goes under the bar, and I want it not under the bar. How would you guys suggest I do this? I would prefer a css method, but javascript would be fine too.
If you have any padding on that divide, it will be added to the 100%. Thats probably your question.
Something like this maybe:
<style>
.one {
height:100%;
display:block;
}
.two {
padding: 20px;
}
</style>
<div class="one">
<div class="two">
</div>
</div>
I have a problem concerning a layout I have to create. The upper layout is the one I currently have. When the Main-div expands by adding content to it, the footer's vertical position increases, which is what I want. But when there's only little content in main, there's space between the footer and the screen's lower border, which is ugly ;) I tried to place the footer sticky to the bottom. The result: when adding much content to main, the footer lies above the main div and its content :( It's a little bit hard to explain, but I think you know, what I mean.
What I want to accomplish is the lower layout. The main div should be "screen.height - header.height - footer.height".
Is this possible? Thanks in advance!
Bye The_Unknown
Try this:
<style type="text/css">
html,body {
height:100%
}
#wrapper {
min-height:100%;
margin-bottom:-150px; /* negative total computed height of footer */
}
#footer_padding {
height:150px; /* total computed height of footer */
}
#footer {
height:100px;
margin-top:50px;
}
</style>
<div id="wrapper">
<div>some content...</div>
<div id="footer_padding"></div>
</div>
<div id="footer"></div>
I'm fairly new to html and all that jazz so I might be misusing certain code.
I want to put the G+1 button and facebook like button next to each other and also centered right under the image on my main page.
Here is my site www.entitee.org
And the appropriate block of code (I hope)
<div class="socialmedia">
<div style="float:left; padding-left:400px;">
<div id="gplus"></div><g:plusone count="false"></g:plusone>
<div style="width:47px;overflow:hidden;float:right;">
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=137562953001123&xfbml=1"></script>
<fb:like layout="button_count" href="http://www.facebook.com/pages/ENTiTEE/162658567144308" send="true" width="225" show_faces="false" action="like" font=""></fb:like>
</div>
</div>
</div>
I'm not sure if I'm misusing the div style or div align items but I can't seem to get it with padding or anything.
Thank you!
I use G+1 medium size, and I added this code in css.
It aligns facebook, twiter and google +1 on same line.
#___plusone_0, #___plusone_0 iframe {
display:inline !important;
height:23px !important;
}
I looked at the code on your site and here are some steps you could take and would get you in the right direction:
remove the float:left from the style attribute for the google plus button
add this to BOTH the facebook and google plus div's style tag display:inline-block;
your div that has the class set to class="socialmedia" has an inner div that has the width set to 60 px make it bigger maybe 100 px
Those steps should get them together on the same line. As always test your site in more then one browser. Good luck!
Use the "medium" size Google +1 button, and add this to your css:
div#___plusone_0 {
vertical-align: bottom !important;
}
div.social{
width:147px;
height:23px;
float:right;
vertical-align:top !important;
}
try to change the DIV tags to SPAN and probably will since span tags can be inline
more info: https://developers.google.com/+/web/+1button/
Your link and the code posted don't match up so I am going off the link provided.
You have both your +1 button and facebook button jammed into a div that is 60px. You need a width of at least 38p + 47px = 85px to fit both. Since there isn't enough room for the floated facebook div it falls beneath.
In conclusion increase the containing divs width. Which would be this div below:
<div style="float:left; width:60px; float:left; padding-left:400px;">
PS: Hi r/trees
css:
.social
{
display:inline-block;
font-size: 1px; /*very important for G+ button*/
/*vertical-align:middle*/
}
I have the page with the structure:
<div id="container">
<div id="header">top menu</div>
<div id="content">content</div>
<div id ="footer" align="center">
<div class="left">left part of footer menu</div>
<div class="right">right part of footer menu</div>
</div>
</div>
Css style:
#container {
position:relative;
height:auto !important;
height:100%;
min-height:100%;
}
#content {
padding:0em 0em 12em;
}
#footer {
position:absolute;
width:100%;
bottom:0;
}
.left {
float: left;
}
.right {
float: right;
}
That works fine in all browsers. But when I add
<script type="text/javascript"></script>
inside
<div class="left">
in FireFox(only) the part of footer after the script come up to the top - between header and content divs.
What's wrong with it?
UPD
This all was about wrong mark-up inside #content. And only FireFox didn't understand when I missed one of closed table tag:) Thank you guys, you helped me to sort it out.
The #footer has absolute position and is inside the relatively positioned #container div so I would expect this. Maybe try making container absolutley positioned.
Also I think your markup is not what you intended. There are one too many opening div tags.
change the #container height from auto to 100% and remove the extra lines for height.
The auto is messing up the calculations as it overrides the 100% lines due to the !important value
Since #footer's position is absolute, with bottom 0, it will be positioned relative to its first (non statically positioned) parent, which is #container. Essentially what's happening here is that #container is becoming mush less high, and dragging #footer with it.
That's happening because you have two height: settings in the css for #container (somehow the script tag triggers it to refresh) so the behaviour would be undefined.
If you're trying to make the footer stick to the bottom of the window, including as it's resized, I'd advise having a javascript function handle it, triggered by the window's resize event (it's fairly simple, see this question on javascript window resize event
You could try the CSS a different way with absolute positioning. I try and avoid float as it can lead to unexpected rendering issues. See this jsFiddle for an alternate approach. Working in IE6, Chrome12 and FF3.6 and FF4 for me.
I want to have 2 boxes right next to each other, one with a fixed width, and another with a width that will change based on the size of the browser. The box has overflow:auto, and I'm trying to get the first box to act as a side bar that will follow you down the page. But of course I can't seem to achieve this, and have come here hoping someone could give me some examples, or point me in the right direction.
Thanks!
To achieve the layout you asked try something along these lines:
HTML:
<div>
<div id="col1">Left Navigation Menu</div>
<div id="col2">Right Content</div>
</div>
CSS:
#col1
{
position:fixed;
width:400px;
}
#col2
{
position:absolute;
left:400px;
}
Will I was trying to think of a good way to do this in CSS, I was channeling my google-fu and found...
http://plugins.jquery.com/project/jStickyScroll
"This plug-in allows you to keep a div element at the top of the browser window when scrolling down a page. The most common use is to keep a sidebar navigation menu from disappearing when scrolling to the bottom of a web page."
You could maybe try...
#element{
position:fixed;
}
Although this doesn't work without hacks in IE6, see
http://www.howtocreate.co.uk/fixedPosition.html
Give this a go (I hope this is what you are after?):
See a live demo here: http://jsfiddle.net/VcecU/
HTML
<div class="main_container">
<div class="content_a">1</div>
<div class="content_lotsoftext">Start. Lots of text goes here! Finish. </div>
</div>
CSS
.main_container{
background-color:#ccc;
overflow:auto;
zoom:1;
}
.content_a{
width:60px;
float:left;
background-color:#3FF;
}
.content_lotsoftext{
float:left;
background-color:#FCF;
margin:-20px 0 0 60px; /* -- Need conditional for IE6 and 7 to remove the margin to get it to work in those browsers --*/
/*-- The following classes help it to sit better in IE6 and 7 --*/
clear:left;
display:inline;
}
Please note, you will need a IE6&7 conditional to remove the margin, clear and display classes from .content_lotsoftext