I'm trying to make an our team page using bootstrap but I can't get the footer to act right. At first it was not filling the width of the page, now (I'm not so sure what I did) this problem is solved but it is overlapping onto the content: some thumnails, writing, and a link. The page with the problem is: http://rdtaxsavers.com/new/OurTeam.php
My css file is at rdtaxsavers.com/new/css/bootstrap.css
You'll notice that the rdtaxsavers.com site footer works fine. Thanks in advance!
EDIT: I got it back to where the footer is not overlapping but now the width issue is back. You will see in my css that my modal-footer class has width:100%; at the end of it but this does not fix the issue.
EDIT: This is driving me nuts. When I fix the width problem then it overlaps, when I fix the overlap the width is broken.
I think you are placing the footer inside the Container class, the container class has a width of 1170px. therefore the footer will not be 100% width to the body. move the footer out of container class. or you have to change the width of container class.
this is what you have:
<div class="container">
<div class="row">...</div>
<footer>...</footer>
</div>
try to do this:
<div class="container">
<div class="row">...</div>
</div>
<footer>...</footer>
Try clearing the float:left in the ul.thumbnails element.
Related
I have a problem because in my code i have an header with padding(left & right at 8%), but on the content box i dont have padding, and when i reduce the firefox window the content box have not the same width than the header (because padding on the header change this).
So I want to the box content have always the same width than the header, and keep dimensions of the slidebar.
in the content right of the slide bar, I have tried to put the same padding but that does not change because the contentbox have a defined width.
This is a code example:
<header>
<div id="logo"></div>
</header>
<div id="box">
<div id="slidebar"></div>
<div id="content"></div>
</div>
thats the JSFIDDLE :
https://jsfiddle.net/t2h839dt/
(if you reduce the preview window on JSFIDDLE, you see the problem (not same width for header and box content).
Your code seems partially responsive. First of all you should decide which approach you are going to do? either fixed or responsive layout.
Please try the below link is for fixed layout.
[jsfiddle][1]
[1]: https://jsfiddle.net/antonysuthakarj/hLsaotco/
I have a quick question on a site that I'm building. It seems that something is pushing the width beyond the window causing a horizontal scroll, and the footer isn't filling the the full width (with a 100% width set).
Can anyone provide any insight?
URL is http://www.brandography.org/sticknfind
Any help is much appreciated.
Thanks!
Problem is with
<div id="content" class="row">..</div>
In bootstrap "row" class has negative left/right margin. As per bootstrap documentation, rows should be placed inside container for proper padding. When you initialize slider, it will calculate wrong content width because of that. Try this instead
<div id="content" class="container">..</div>
The width of your slider div is more than that of the body.
You can fix this by either:
_ Adding overflow-x: hidden; to your body tag.
_ Putting a wrapper div around your content and add overflow-x: hidden; to that div.
How do i keep my footer at the bottom of the page even when I click the toggle for the sidebar? The footer I made is at the bottom but whenever i click the sidebar toggle it goes up like this
Im using bootstrap btw.
This is how I did it. I'm not entirely happy with the outcome as the height of the footer is a fixed number (I would prefer if the height could be dynamic).
<div id="wrapper">
All your contents, div, nav etc go in here
<div id="push"></div> <!--add the push div here -->
</div>
<footer>
</footer>
The CSS:
#push, footer {
height:100px; /*or whatever height you need */
}
I'm not sure what your codes look like, so I can only hope that this helps.
I think you are looking for this: http://getbootstrap.com/2.3.2/examples/sticky-footer.html
It is a plugin which makes your footer sticky. You can find the code in the examples folder of your bootstrap download.
I have fixed footer DIV and content DIV. Footer DIV is fixed so it is visible all time. Content DIV is 100% height, but it touches footer DIV and crosses it to the end. I want it just to end when footer begins.
<div id="footer">
</div>
<div id="content">
</div>
Here is a jsFiddle link: http://jsfiddle.net/MXMWe/3/
Problem: Content DIV (with its text) goes over footer.
Note 1: Footer has to be visible all time no matter where you scroll (possibly fixed.
Note 2: Scrollbars have to be normal as it is when you first load browser. No changes there.
Here is an image telling what I want to achieve:
I will give more info if asked.
Thanks a lot.
I updated the jsfiddle:
http://jsfiddle.net/MXMWe/4/
A few things:
I added a <div id="footer-padding></div> before the closing div in #content. Then in the css added height:120px; (the same height as the #footer ) - This allows the content text to not be stuck at the bottom of the site, but instead the very top of the footer.
I removed the opacity that was on the footer because if you have the opacity it effects the entire div - AKA the text from the content div would be visible behind it since it's transparent.
I added a z-index: 2 to the #footer to ensure it is above the #content at all times.
If you're going to have an opacity/transparency as the background of the footer you will see anything it's above, behind it.
Have you tried using the CSS Sticky Footer?
I am trying to create a website where I have both the title bar and the page footer in fixed positions, i.e. title bar always top and footer always bottom.
This has created issue in that I need to push the content on the page upwards so that the page footer will not overlap the content.
I need to add some space to the bottom of the content so that the overlap doesn't occur when a user scrolls to the bottom of the page.
I have tried to add a margin-bottom css property to the bottom most DIV so that there should be some space added to the bottom of the page, this worked for the top most DIV using a margin-top css property but not for the bottom.
This is the main structure to my website, without content:
<html>
<head>
</head>
<body>
<div class="CONTAINER">
<div class="PAGENAVBAR">
</div>
<div class='CATEGORYNAVBAR'>
</div>
<div class='PAGE_CONTENT'>
<div class="LEFTCONTAINER">
</div>
<div class="RIGHTCONTAINER">
</div>
</div>
<div class="PAGEFOOTER">
</div>
</div>
</body>
Can someone please suggest a method to achieve this effect?
I've found this to be effective:
body {
padding-bottom: 50px;
}
margin-bottom moves the whole element, try padding-bottom instead.
adding padding-bottom to the last element should do this, or you could add padding-bottom to the container element, just remember that this will be added to the height if you have it set in your css
use paragraph to do this. html paragraph
Try using 'padding-bottom' instead. The behaviour of this is more consistent across different browsers than 'margin-bottom'.
But be aware this will add to the overall height of the element in question, if you're using this in any calculations.
I'd give PAGE_CONTENT a margin-bottom; you may need to also give it overflow:hidden if your LEFTCONTAINER and RIGHT_CONTAINER are floated.
In css give margin-bottom attribute to the container class.
.container{
margin-bottom:100px;
}