My footer doesnt go all the way to the bottom.
I have put my code in a js fiddle for people to have a look at:
http://jsfiddle.net/q2pd5/
My problem is better viewed on the actual page:
http://dev.madhousecreative.co.uk/
or on the full screen result of the jsfiddle its obvious also.
As It is clear to see, underneath the footer there is a white gap, and I dont know why it is appearing.
I have alot of floats in here but I have tried clearing them where necessary.
Have also tried to sticky footer as suggested in some other questions answers but that doesn't work either.
As far as I am aware it is on all browsers
Just add
overflow: hidden
to #footer in your css. This is a little trick that often gets overlooked. Basically overflow: hidden allows your div to size vertically based on it's contents.
You haven't cleared the floats of the lists in the footer. Clear it with overflow: hidden; on the footer like this:
#footer {
overflow: hidden;
}
Your footer is not being properly cleared. Try it with a clearfix like so:
#footer:before, #footer:after {
content: "";
display: table;
}
#footer:after {
clear: both;
}
#footer {
zoom:1; /* ie fix */
}
The footer has height: 200px; specified, chopping of the background image. The footer actually extends to the bottom of the window, but the last item in the list can't be seen because it is white text on white background.
In other words, setting overflow: hidden doesn't fix it alone, it just chops of the rest of the footer. Remove the height: 200px as well, and it works.
Related
so I made a website but for some reason no matter what I do, I cannot get any scrollbars to appear when the page is too small. I've been looking for quite some time but can't find a solution. I've tried many things but can't figure it out for the life of me. I suspect it has something to do with overflow but even adjusting that doesn't seem to work. If anybody could help me diagnose this, I'd really appreciate it. I'll go ahead and link the relevant codes below. I know it's probably a simple problem, but I'm about to rip my hair out trying to figure it out. Thank you for any help, I really appreciate it.
Main index page: http://pastebin.com/TkdzdKbG
CSS Style: http://pastebin.com/tMKQtC6v
Apply this CSS
.ibg-bg {
height: 100% !important;
position: absolute;
}
Remove position
.bg {
height: 100%;
/*position: absolute;*/
width: 100%;
z-index: 0;
}
I'm not sure if it's the solution you're looking for but in your "container" div, there's an inline style "overflow:hidden", if you remove that, you can get scrollbars whenever the page is too small.
http://prntscr.com/8pcd0f
I think this is because of overflow property. Try this on your stylesheet,
.container .bg {
overflow:scroll !important;
}
Most of your contents are under div.bg > div.display but the height of the parent node-div.bg- is 100% and its overflow value is set hidden by one of the scripts. (query.interactive_bg.js, I guess)
You can set the height of div.display to 100% and its overflow-y value to scroll to scroll the contents or if you want a horizontal scroll bar as well, change overflow-y to overflow.
Add these line to your style.css file, line 172:
.display{
position: relative;
height: 100%; /* Added */
overflow-y: scroll; /* Added */
}
I have a website and from out of nowhere, whitespace started appearing on the left hand side of the page. I just can't figure out what the issue is?
Please help. Here is the link the the website
Try this:
.home #primary {
clear: both;
}
Removing overflow hidden removes the whitespace on the left, however the feature image is off.
.no-container {
overflow: hidden;
}
Remove the overflow: hidden from the .no-container class
Then you need to fix the slider position.
You need to remove this:
.no-container {
overflow: hidden;
}
And then adjust the settings for the Revolution Slider Wordpress plugin. It looks like you have added an offset value as it automatically adds a left style to the element. Also set the width to 100% it is currently set to 1663px and it should be ok.
I have added Bootstrap Sass to a Rails project and I'm trying to redesign its home page. The issue I am facing is that the background style I have added to my <body> element only has effect on the part of the page that is initially visible upon loading the page. The page actually scrolls down to show additional elements, which are all enclosed in <body>. To solve this, I enclosed everything in <body> with a <div class="clearit"> .......</div>. In the CSS, I did two things: I first tried using the overflow:auto property, but that did not have the desired effect. I have also tried the following:
.clearit {
zoom: 1.0;
clear: both;
}
.clearit:after
{
zoom: 1.0;
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
overflow: auto;
}
Even with this, the browser seems to think that my <body> is simply the 100% of the part of the page that is initially visible upon loading, not the entire page till the bottom of the scroll bar. I have foraged through online solutions and guides, and tried multiple approaches for several days, but haven't yet found one that works. Any insight would be appreciated.
This may not be helpful, but are you trying to accomplish something like I've done here?:
http://www.danhendricks.com
Rather than setting the to 100%, I just set the top to height=100% and set the background image. See the .intro-section class here for an example:
http://www.danhendricks.com/wp-content/themes/single-page-modified/style.css
.intro-section {
background: url(images/my-background-image.jpg) no-repeat bottom center scroll;
height: 100%;
padding-top: 50px; /* So content isn't covered up by the header bar */
}
Though I don't have scrolling on this page, an easier to read example may be found here. It uses the exact same technique, just minus the header bar and and sections below the .intro-section:
http://www.nimbium.com
If I'm off base with what you are looking for, I apologize. I'm also new here so I apologize if this isn't a properly formatted response. I was just trying to offer some quick help.
I'm trying to make a layout where the footer is always at the end.
However, the HTML body should have a div fixed to the left and right split another with the remaining size.
Until then I have no problem ...
But when the right div has many lines of HTML not generally continues until the end, and the footer is in the middle of the screen.
When # main is with position: relative; happens the error, but if you take it, the speakers do not work the way I need.
I've tried everything and could not fix.
Example here:
http://jsfiddle.net/WzE3g/
#principal
{
width:100%;
float : left;
word-wrap: break-word;
/*display: block;*/
position:relative;
/*position:inherit;*/
bottom:0;
}
Use position:fixed; instead of absolute in #rodape element. This way it will be always at the the end.
I think you are talking about the sticky footer...
Here is an example with the explanation
I have created my first template but my sidebar is not working as expected. Please take a look at this: http://neo4evr.com/templates/torque/
As you can see, the sidebar has gone down to the footer position and not at the side of #content div, as I wanted. Can anyone help me to bring it beside the content div?
You need to properly clear your #container div and float your content to the left to fix your issue. Try this:
#container:after {
clear: both;
}
#container:before, #container:after {
content: "";
display: table;
zoom:1; /* ie fix */
}
#content {
float:left;
}
This should be pretty easy. Just add display: inline-block to the div#content. The sidebar will then goes up and sits next to the div#content. One thing you might notice though, the sidebar might be a little bit higher than the content. If you want to take it down a little bit just so that it aligns with the content, just add the same amount of padding to the top of the sidebar like the one with the content. Which in this case, it's 20px.