see the example..the footer won't stay at bottom/
EDIT
Tried to remove clearfix but it is not pushing the footer to the bottom or eliminates the white gap below the footer. Clearfix: display block is done via the Pinnaclecart itself.
Even if I tried to remove display:block, the footer will be in mess. For an example, it will move footer items to the left outside of the page where the products are laid out.
any insight will be appreciated!
I think you might want to add the following to your #footer section in the css file:
position:fixed;
bottom:100px; /* 100 being the assumed footer height, you'll need to do the math :) */
(also, it'd be kind to spend a little more time on your problem description)
Related
I have been struggling with this problem for a long time now, and although I have found a number of good solutions to parts of my problem, none of them seem to work combined, so I have decided to ask you.
Here is a scrn shot of the website:
http://i.stack.imgur.com/6C0k1.jpg
What I'm hoping to achieve is to have a scroll bar appear on the far right of the page when content overflows the blue container, the div that has all my content in it, not the far right of the div itself, like it would if I set the div to overflow: auto or overflow: scroll.
In other words, I would like the page to scroll, not my div.
The site essentially consist of a body background, a div for the menu and a div for the content. The code is pretty messy, so I have left it out, but if you need it, just leave a comment and I will add it right away.
Everything is supposed to be fixed as in remain like it is on the scrn shot, except for the content in the blue container to the right. I initially figured that setting everything except the container to position:fixed would work and trigger a scroll bar to appear for the page that could be used to scroll through the div, but it didn't. This doesn't work though, as any visible overflow in the container just 'leaves' the page; it doesn't trigger a scroll bar.
As I've also pointed out in the scrn shot, the container-div has padding on the top and bottom and is also slightly transparent.
These two features seem to make things even more difficult. The padding, because setting overflow: visual makes content overflow, and thereby be visible, even through padding.
The transparency is an issue, since I can't just cut out the padding and give it a z-index that's higher than the content itself, in order to hide it; it will still be visible through it. The background image is set at a percentage or set to 'cover' (still figuring out which one works best), so cutting out the padding with the segment of the background image it covers, will not work either.
I hope I presented my problem and the issues clearly enough. If you have any questions or any feedback, please leave a comment.
Thank you in advance for any replies,
Magnus
NOTE: This is a repost of an early question that was trashed by someone who didn't bother reading through it properly before rating it down. The question essentially died afterwards. I have tried to make things even more clear this time, so I'm sorry if I repeat myself. This is also the reason why my post is so long this time.
Something like this?
Demo: http://jsfiddle.net/6R7c2/
HTML:
<div id="top">Top</div>
<div id="middle">
<div>Content
</div>
</div>
<div id="bottom">Bottom</div>
CSS:
html,body{
width:100%;
height:100%;
margin:0;
}
#top,#bottom{
height:10%;
background:blue;
color:white;
}
#middle{
height:80%;
overflow:auto;
}
#middle>div{
height:10000px;
border:25px solid red;
}
It can be something like this
see http://jsfiddle.net/QfsvB/
CSS
div.scroll
{
background-color:#00FFFF;
width:100px;
height:100px;
overflow:scroll;
}
HTML
<div class="scroll">You can use the overflow property when you want to have better control of the layout, the overflow property specifies what to do if the content of an element exceeds the size of the element's box.</div>
I'm having trouble figuring out how to make the my pictures div show in the right place
here is a fiddle which looks worse the my page bust will give you an idea of what i"m trying to do
here is how it really looks a the of the page and at the `!
as you can see the div "pictures" has space above the pictures inside it and they pictures are pushed out at the bottom making my gradient incorrect.
I can't figure out where the extra space is coming from
additional
there is additional space on the right that grows while you expand the browser window until the next picture can fit then it shrinks. how can I make it so it stays at like 10px until the next picture fits
The problem you're having is that the div.spacer at the top of your pictures DIV is clearing the floated a.home (the sidebar, if I'm not mistaken). A possible solution would be to put overflow:hidden on the pictures DIV.
(Basically, you can control the "scope" of CSS clear by using overflow to create what is called a "block formatting context". If you apply overflow:hidden to the pictures DIV, then clear:both elements inside of that DIV cannot clear floats outside of that DIV.)
You have top: 200px; in the CSS of your pictures div
Hard to tell with the JSFiddle but:
div.pictures {
position:relative;
top:200px;
width:90%;
margin:auto;
background: rgba(255,255,238, 0.25)
}
Looks like that top:200px; rule is adding significant space.
try putting a <br style="clear:both;" /> at the end of the div!
Set top in the div.pictures to 0px;. However, it's difficult to tell if this is the result you want using Fiddle.
On Facebook, using the FBML box add-on, you can create a tab that contains custom code. One of the things you can do is hide content from people who don't "like" you and reveal content immediately once they click the "like" button. This is done via this code:
<fb:visible-to-connection>
<div class="fan">Content for fans</div>
<fb:else>
<div class="no-fan">Content for non-fans</div>
</fb:else>
</fb:visible-to-connection>
The problem is that Facebook applies a visibility:hidden to hidden content, which means the content is gone, but the white space remains. You can set margin-top of .no-fan to a negative value, which will move up the content, therefore hiding the white space. This generally works quite well. It actually works flawlessly if the height of the content of .fan is equal to .no-fan. In my case they aren't. My .fan content is longer and therefore once they "like" us, the bottom image gets cut off (on .fan). It seems to do the equivalent of overflow:hidden, taking the height of the .no-fan content. When I force the height of the .fan content, everything is revealed, but then when you are not a fan, there is white space above the .no-fan content. I've tried various combinations of applying padding, forcing heights, but there's always an inconsistency.
Has anyone had this problem? What have you done to solve it? Even if you've never worked with FBML, what would be another logical approach?
Thanks,
Ryan
You need to add this code on top:
<style>
#wrapper {
width:520px;
margin:0 auto; border:0; padding:0;
position:relative;
}
#non-fans {
width:520px;
position:absolute; top:0; left:0;
}
</style>
I had this same white space issue in the facebook like box but it was solved by defining height. did u tried that?
OK, after another hour of playing with this, I figured out what the problem is.
Let's say my fan content is 100px tall and my non-fan content is 75px tall. When Facebook loads the non-fan content, it places a span around all of it, with overflow: hidden being one of the inline style attributes. When you "like" the page, it switches over to the fan content, but the height of the div containing overflow: hidden isn't updated, which means 25px of my fan content gets cut off.
The solution was to force the non-fan content to be 100px in height, so during the switch to becoming a fan, all the fan content would have room to be displayed. The down side is that there's some extra space below the non-fan content, but it's beyond the content I care for visitors to see. At least there's no white space above my content and all of my content is visible 100% of the time.
That's the solution I found, if anyone has recommendations or something I can try, I'd appreciate feedback.
-Ryan
I'm having a problem with this page.
The .blog-footer div needs to clear on the right to correct for the height of the pictures introducing clear:right; causes the huge gap to appear on the page in FF and IE.
I'm at a loss, I've tried numerous ideas to get around the problem and at this point I've been staring at it too long to see the problem clearly. Can anyone help me out.
Thanks in advance.
Try using positioning. Add these to get you started:
#page-body {position: relative; width: 740px; margin-left: 20px;}
#sidebar {position: absolute; right:-190px;}
There are some subtleties, like getting the right behaviour when the content as a whole is not long enough to push the footer down, but I find those easier to work out than floating problems. With a fixed height footer like yours, that is easy to fix using a bottom margin on the page body and some more absolute positioning for the footer. You have gobs and gobs of extra divs to play with.
The clear attribute works relative to floating elements. So you can use it to make sure the footer closes the div below the picture, but the fact that your sidebar is floating as well actually pushes things down to the bottom of the sidebar.
So, as #Nicholas Wilson proposes, one solution is to position your sidebar using means other than float. And your layout doesn't appear to really require float for the sidebar.
In another direction, I noticed that you are currently hardcoding the heights of your pictures. Since you know these heights, another possibility is to forget about the clear:right for blog-footer , and add a min-height attribute to the asset-body, as in (this is for the beer festival)
<div class="asset-body" style="min-height:184px;">
Certainly not elegant or DRY, but if you had to you could do this or have javascript do it.
Alright I have a CSS liquid div based layout for my personal web site. The address is
http://danberinger.com/preview.html
The problem is the I do not want the footer section to act as if it were displayed inline, because right now when the window is stretched beyond the pixel width needed for the intro_container, it moves the footer div to the right of it. I would like this footer to stay put at the bottom of the page rather than moving up and to the right when space allows for it.
Thanks for any help you can offer. I have loved this forum so far, very helpful.
#footer {
clear: both;
}
This will ensure it is always pushed down below all other floated content. This seems to provide the effect you are asking for.
here is css fix for it
#footer{
position:absolute;
bottom:0;
}