For some reason the footer on one page of my site is not full width. There's a huge white space on the left that I cannot seem to get rid of and its causing my entire footer to be shifted to the right.
This is the current CSS:
#main-footer {
width: 105%;
margin-bottom: -50px;
margin-left: 0;
margin-right: 0;
height: auto;
padding: 50px;
background-color: #2E2E2E;
}
#top-footer {
height: 30px;
background-color: #77CAE9;
margin-left: 0;
width: 105%;
}
I have a feeling it's related to the page width but I can't figure out where to adjust that either. I'll be so grateful if someone can help me out with this!
EDIT: The URL to the page is http://tstand.com/blog
Thanks :)
Angela
Start with moving your <footer> outside of the <div class="container">.
The class .container is used to centre it's content in middle of the screen. See more details here here:
http://getbootstrap.com/css/
A common cause for this can be a default padding or margin of <body> or even <html>. In that case CSS like this should fix it:
body {
margin:0;
}
If the problem persists please post a complete, but minimal example that demonstrates the issue.
Related
I've applied the CSS sticky footer tutorial that I got from here on my website, but for some reason I can't get it to work?
JSBin
Thanks in advance.
Remove the top margin from #body and replace it with padding:
#body {
width: 1200px;
margin: 0 auto;
overflow:auto;
padding-top: 80px;
padding-bottom: 170px;
}
add 100% height to html (not only body):
html, body {
background-color: #FFF;
margin: 0;
padding: 0;
height: 100%;
}
Full JSBin solution and preview
Did you apply the correct #footer id in your HTML code?
<div id="footer">
</div>
I can not immediatly see what is wrong with your code (it is a lot of css, and you use strange tags like center). I swear by this version of the sticky footer however: http://ryanfait.com/sticky-footer/
Works fine for me and is very much legacy/cross browser compatible. Perhaps this is an option for you...
I had a jqGrid displaying perfectly ok.
Then I started to develop a basic site layout structure and got into problem: jqGrid's header got really huge! :)
Here's the screenshot.
The structure of the page:
<div id="sidebar1" />
<div id="sidebar2" />
<div id="centralpart">
<div id="jqgrid">....</div>
</div>
And css:
#sidebar1 {
float: left;
width: 150px;
padding: 10px 10px;
}
#sidebar2 {
float: right;
width: 300px;
padding: 10px 10px;
}
#centralpart {
margin: 0 300px 0 150px;
text-align: center;
}
I detected that things broke because of floats: once I remove them jqGrid's header goes back to normal size (although other parts of layout get messed up ;))
Also I noticed that with floats header spans down exactly by amount of height of the right sidebar, so it looks like it tries to float it...
I also tried to clear floats by putting <br style="clear:both" /> before jgGrid, but that shifted it to the bottom of the page beyond sidebars, that's not what I want.
I'm only taking my first steps to css/html/jqgrid, so I can miss something really obvious :-)
First of all it seems to me you have to fix margin value of #centralpart to the following
#centralpart {
margin: 0px 320px 0px 170px;
text-align: center;
background-color:red
}
To solve your main problem you should set height of the titelbar div div.ui-jqgrid-titlebar explicitly:
div.ui-jqgrid-titlebar {
height: 16px;
}
Like you can see on the demo the results will be much better after the changes. (I included background-color in every div to see more clear the size of every div.
I am making a very simple blog for my PHP project, but am having a simple problem. I can't get the image for my header to float all the way right.
I have a banner with some text on the left, I have a 1px slice repeating across the width of whatever resolution may be chosen (ensuring the banner fills any screen). I would like the image to always render on the right edge of the screen, again, independent of screen resolution. But it is coming in at a fixed position. Here is what I have written:
HTML:
<div id="header">
<img src="images/banner.jpg" alt="banner" title="Prairie"/>
<img class="right_image" src="images/banner_right_image.jpg" alt="elavator" title="prairie elevator"/>
</div>
CSS:
#header {
position: fixed;
top: 0px;
width: 100%;
height: 120px;
background: url(images/banner_right.jpg) repeat-x;
z-index: 1;
}
#header.right_image {
float: right;
position: fixed;
top: 0px;
z-index: 1;
}
What is the issue here?
Thanks for any input.
You should separate #header.right_image so that it is #header .right_image
Also remove position: fixed from #header.right_image
This works:
#header .right_image {
float: right;
}
Example: http://jsfiddle.net/FTBWU/
A link to your site would help!
I always throw at the top of my header:
* { margin:0; padding:0}
You probably have padding or margins inherintly applied to your html or body tags depending on what browser you're using. Try that - and the is there a URL I can see the whole thing at?
I don't know how well the float works with a fixed positioned element. Maybe try something like this for your image?
#header .right_image {
right: 0px;
position: fixed;
top: 0px;
z-index: 1;
}
I currently have an html setup that looks like:
<section class="topBar">The site's permanent top bar</section>
<header class="body">Some header info here</header>
And a CSS setup like:
.body { clear: both; margin: 0 auto; width: 600px; }
header {
height: 46px;
margin: 30px auto 20px auto;
}
.topBar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
}
The goal is to have topBar stay at the top of the page, and the header and all after it scroll below it.
That for the most part works fine. The problem is though that header's top margin is ignored as long as topBar has position:fixed (So when the page loads, header is pretty much hidden below topBar).
I've tried changing header from margin-top to top and that doesn't help either.
How do I fix margin-top being ignored?
Here is actually a bug report on it with a test page to show the problem:
Bug report: http://www.quirksmode.org/bugreports/archives/2007/03/ie7_positionfixed_and_margin_top_bug.html
Test page: http://feragnoli.com/ie7/
add padding-top:250px to the body tag, and remove the margin-top from the .lower div
Put the SECTION.topBar under the HEADER.body:
<header class="body">Some header info here</header>
<section class="topBar">The site's permanent top bar</section>
since the SECTION.topBar has been fixed position, so the order in the document should not be quite that important...
I just met the same problem yesterday, so the solution above is what i do in my development, since this is a question asked long time before, so it you have a good solution found already, just tell me how please!
I've been searching through forums to find a solution for the problem I'm facing and couldn't find any. So here I am, again, asking for remedy.
I have this page which encase personal profile form. That form is enclosed in page container div and is quite long that it requires main scrollbar in order to see those hidden. And there's a footer section at the bottom of the page where copyright statements are displayed.
My problem is I can't find a way to make my page container div to stretch along with the body element. I've applied height: inherit to that div but still it refused to stretch so that it covers till the border of the footer section. Now, there is big gap between the footer and that div filled with body background color. Here's a screencap for better understanding.
screencap
/*Form container*/
#form_container{
width: 600px;
background-color:#FDAE80;
margin-top: 15px;
margin-left: 110px;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
}
body{
margin-top: 0px;
margin-bottom: 0px;
height: 100%;
background-color: #683468;
}
/*Page Container*/
div.mcontainer{
width: 1032px;
height: inherit;
background-color: #ffffff;
}
/*Footer Section*/
div.footer{
width: 1032px;
height: 80px;
border-top: 1px solid #683468;
margin-top: 10px;
text-align: center;
font-family: Arial;
font-size: 12px;
color: red;
position: relative;
bottom: 0px;
background-color:black;
}
Any help would be appreciated.
EDIT Just to clarify, Footer section is inside page container div. Here my html - htm
Try adding a clearing element as the last item in your page container, after all the form elements. Could be <br clear="all" /> or a div with style clear:both.
A better idea - remove the height: inherit; from your mcontainer style. This fixed it for me.
try adding html to the height to:
html, body {
height: 100%;
}
as discussed on A List Apart: http://www.alistapart.com/articles/footers/
Try to use overflow: hidden; on div.mcontainer.
If you have floating elements in your container, try placing clear-both-div at the end of the container div:
<div id="mcontainer">
...code
<div style="clear:both;"></div>
</div>
I had the same problem, now I am using java script (jQuery) to solve it.
In my case it was the div for the menu bar and I calculated the height from the main container plus the height from the header.
$(document).ready(function(){
var h = $(".main").height() + $(".main").position().top
$(".lmenu").css({height:h+"px"})
$(".rmenu").css({height:h+"px"})
});
Right now it seems to make more sense to use the height of the body:
$("body").height()
If there is a version without javascript, it would be interesting to know. But meanwhile this could be a workaround.
Maybe you should try adding: clear: both to footer class