I am trying to create a sticky footer from a simple looking tutorial I found online. This seems to work ok until I try putting a width on my content div and I have no idea why.
If I add a width to the content div it seems the footer no longer has any distance between itself and the content div and so it obscures the content if there is a lot of content.
I have created this jsfiddle but it doesnt look as obvious there as it does if viewed in say firefix or IE.
Does anybody know why this is happening and what can I do to have a content div with a fixed width and auto margins to centre it but still have a footer that sticks to the bottom all the time if there is hardly any content or a large amount of content.
Below is my css for the content div:
#content {
margin-top: 15px;
padding-bottom:100px; /* Height of the footer element */
border-left: 1px solid #C9C9C9;
border-right: 1px solid #C9C9C9;
border-bottom: 2px solid #C9C9C9;
box-shadow: -3px 0 3px -3px #333, 3px 0 3px -3px #333;
width: 1024px; /* Here adding a width causes the footer to overlap */
margin-left:auto;
margin-right:auto;
background-color: white;
text-align: center;
border: 1px solid red;
}
http://jsfiddle.net/32M9Q/1/
At least in Chrome, the JSFiddle shows no problems for me. It looks the same with or without putting a width on content. I even added a bunch more words and the footer still didn't cut anything off. So the padding does effectively work, at least in my case.
However, based on what you said on the other answer, perhaps you could just change position:absolute on the footer to position:relative (assuming the footer won't have anything placed under it...and I'm guessing not since it's a footer). It makes sure the footer is placed after the content instead of being placed on it. Be wary, though, and make sure to check it in many different cases (browsers and devices).
I would also include a margin-bottom on the content, just in case.
Try adding the following CSS rules to the #footer element:
position: fixed;
clear: both;
This will give you a sticky footer (if I got what you want to do correctly) that does not overlap with the main content. You can probably loose the clear: both part, but it may help with some browsers...
Setting the background color of my web page to match the footer and the body isnt an option, I appreciate all the answers I have been given so far but unfortunately none of them were suitable for me.
I have had to do what I consider to be a hack which is add a div below the content which is higher than the footer, this means the footer sits on top of this div and not my content giving the illusion of space between the content and the footer:
<div style="height: 120px;"></div>
<div id="footer"><span style="color: red"> This is the footer section</span></div>
Related
My container div adds a scroll bar below my div #wrapper.
This is my css for the wrapper
#wrapper {
background:#383434;
width:1000px;
height:auto !important;
min-height:100%;
overflow:hidden;
height: 100%;
-moz-box-shadow: 0 2px 15px 5px #000;
-webkit-box-shadow: 0 2px 15px 5px#000;
box-shadow: 0px 2px 15px 5px #01DF01;
margin-top:20px;
border-radius:5px;
margin-bottom:50px;
}
How can I remove or hide the scrollbar?
Deleting/modifying overflow:auto; solves the problem. I think hidden is what you are looking for.
If you look at the documentation you can find what does the different values actually do:
visible
Default value. Content is not clipped, it may be rendered outside the content box.
hidden
The content is clipped and no scrollbars are provided.
scroll
The content is clipped and desktop browsers use scrollbars, whether or not any content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment. Printers may print overflowing content.
auto
Depends on the user agent. Desktop browsers like Firefox provide scrollbars if content overflows.
overflow: auto means to show a scrollbar if the content overflows, which is happening in your case. Perhaps what you want is an overflow: hidden, which will not show any scroll bars. In your site, this seems to work.
The other option is to hunt down what it is that has a size overflowing your container and shrink it.
You can add overflow-x: hidden to the style for #wrapper.
Edit:
I'm finding that the margins for your #middle styling is causing that horizontal scrollbar to appear. Putting margin-top: -55px and clearing the margin property on it fixes the problem.
As I'm developing my webpage, I found an issue using the box-shadow feature.
I want to add a box-shadow to the whole wrapper of my webpage, which contains the header, nav, content and footer.
The nav and content are side by side element.
The problem is, that when I add the box-shadow to the #wrapper, it only appears on the header, as I reproduced here
I was able to fix it by using the side by side elements with the display: table-cell propriety, but it ruined the rest of the page, so I'm asking how could I fix this.
Add overflow:hidden to your wrapper as shown here. It will force your container to wrap the floated elements.
[edit] Without having to add extra markup...
Use CSS clear:both; because you are floating elements to the left, check this out : my fiddle
instead of a wrapper you could simply make another separate with the same size and position and give it a box shadow. change the height to whatever you want, just figure out the height of the content you want to be shadowed.
<style>
div.shadow {
width: 400px;
height: 100%;
position:absolute;
z-index:-99;
box-shadow: 3px 3px 20px #999;
-moz-box-shadow: 3px 3px 20px #999;
-webkit-box-shadow: 3px 3px 20px #999;
}
</style>
<body>
<div class="shadow></div>
<!-- everything else here-->
I am trying to implement a menu into an area.
http://www.gardensandhomesdirect.co.uk/newhomepage
You will see the end of the menu div slightly off the page to the right, however this needs to be inside the HOMEMENU section (the long black bar with no content)
It seems to be overflowing into other areas, despite using a clear:both div.
Can anyone shed any light on this? Is it a z-index issue or something more simple?
You have a width: 930px; somewhere.
Remove it.
#topmenu {
list-style: none;
**width: 930px;**
height: 20px;
background: #014464;
border: 1px solid #002232;
}
When I inspect the element (menu-bar) is see there are some space (like) characters outputted.
I've been trying to do something extremely simple, yet I can't make it work!
Here's what I'm trying:
---margin top: 15 px
---VARIABLE HEIGHT DIV (imagine a box-like element)
---margin bottom: 15px
I basically want the box to resize based on the browser window height.
Here's what I've been trying:
CSS
body {
background-color: #D0CDC5;
height:100%
}
#info_box {
background-color: rgba(40,40,40,0.5);
border: rgba(34,34,34,0.9) 1px solid;
width: 350px;
height: 100%;
margin: 15px 0px 15px 20px;
}
#info_box p {
color: red;
}
HTML
<body>
<div id="info_box">
<p>Sample Content</p>
</div>
</body>
By the way, why is that the text appears 15px from the top of the div? Why isn't it flush?
Thanks a lot guys,
**EDIT
See this link, very good answer for all browser but IE6 and 7. another HTML/CSS layout challenge
Thanks to #Hristo!
UPDATE
Check out the fiddle...
Edit, Full Screen
Check out the fiddle... http://jsfiddle.net/UnsungHero97/uUEwg/1/
I hope this helps.
Hristo
if you don't need to support IE6, and this is not part of a bigger layout, there is an easy way:
#info_box {
position: fixed;
left: 0px;
top: 15px;
right: 0px;
bottom: 15px;
}
alternatively, you could make #info_box stretch the full height, and put a position: absolute div into it with the same data as above.
I'm not entirely sure whether there's a way to do this without absolute or fixed positioning, because no matter whether you use padding or margin, you'll always end up adding 30 pixels to what is already 100% of the height. I'm happy to be proven wrong though.
Elements get their height based on the content inside them. So you already have an element that is centered and that will have margin top and bottom of 15px from the top and bottom of you site's body.
But if you want an element that will always be centered middle of screen, filling all but 15px top and 15px bottom, it is not achievable with "conventional" means. It will either have to be an image or a re-sizable box that will have a scroll-bar if the content is bigger than screen size.
Anyways, if that is what you want, give it a fixed size and height, and use position:fixed.
If you always use a consistent browser resolution, then it is doable. But if your screen size changes, depending on the device you use (tablet, mobile etc.), then this cannot be accomplished though CSS alone.
I have done this dynamically using jQuery.
I have a div tag styled through CSS. I set the padding to 10px (padding:10px), it works just as I wanted in Firefox and IE7, but in IE6 it adds additional padding at the bottom (about 2-3px I think). Anyone has idea about what's happening here?
[update]
I just noticed this, the div tag I'm talking about has a background-image. When I removed the background-image, the extra padding on the bottom disappears. Any ideas?
[another update, code sample]
Here's the CSS applied to my div tag:
.user-info{
margin-top: 20px;
margin-right: 20px;
padding: 10px;
background-image: url("../img/user_panel_bg.png");
float:right;
border: 1px #AAAAAA solid;
font-size:12px;
}
Is there an image in your div? If there's an image, there's a bug in IE 6 that can cause white space within the div to create extra padding on the bottom
Extra padding shows up with
<div>
<img src="myimage.jpg">
</div>
Extra padding doesn't show up when you change your HTML to
<div><img src="myimage.jpg"></div>
I would highly recommend taking a look at the positioniseverything.net site and its coverage of IE issues and workarounds. Take a look at the holly hack section - I believe you will find the answer there.
[edit - added] take a look here for the 3px issue, explanation and fix
For box settings and browser difference, sitepoints box model article offers some good insight as well.
Have you tried hiding your DIV overflow? overflow:hidden;
Edit: You may also try display: inline; if you're talking about horizontal pushing.
Make sure font size is not creating the problem. Even with no text inside a container element (say for a bottom cap on a stretchable container) IE6 will still size the height of the box no smaller than the font size (even with an explicit height set.)
So, for example, if you have the HTML:
<div class="box">
<h1>Heading</h1>
<p>This is the main content.</p>
<div class="bottom"></div>
</div>
...you will need this CSS:
<style type="text/css">
.box {
background: url(bg-middle.jpg) repeat-y;
}
.box h1 {
background: url(bg-top.jpg) no-repeat;
}
.box .bottom {
background: url(bg-image.jpg) no-repeat; /* bottom cap image */
height: 10px; /* height of your bg image */
font-size: 1px; /* for IE6 */
}
</style>
potentially 'margin' or 'border' properties?
You can also look at something like a CSS reset style sheet which will let you set up defaults which should be reasonably consistent across browsers.