http://mehulkar.com/CD
This is driving me insane. I have a fixed position header and a fixed position footer. I want the page class to scroll between the two.
For some reason, my page class starts at top:0 of the entire document, instead of starting below the header.
I could bypass the problem by relative positioning all contents of the div by the appropriate height, but I will be using page IDs to navigate the page. So when I navigate to an #ID using an a link, it navigates to the top of the document.
How do I fix this!?
Your header position is fixed, which takes it out of the flow of the document. Not only does that mean it sits where you put it, but it also means it doesn't push the content below it downwards.
Easy fix would be to add a margin to the page div that's exactly the size of the "always-on-top" header.
your css class "cleared" seems to have a height of 0. make sure the min-height is set to 100px
To start with try changing your page class property:
margin:0 to margin-top: 100px
To move the footer to the left, if that is what you want remove:
right: 0 from your #footer css.
Also remove position:absolute from #content css and add margin-left:200px;
And add margin-bottom:50px to the .wrap class in css.
Once all these changes have been made you should have your header at the top, footer at the bottom, both left aligned. And the content of the page readable and scrollable between the header and footer, with it all being visible with scrolling.
Any questions just ask.
Related
I'd like to have many elements fixed, but then have the main text block scroll.
Before I start coding, I'd just like some advice on the best way to do this. Should I wrap ALL the fixed elements together, and then inside that, have a relative element for the scrolling part?
Here is what I am trying to do:
I think you should create a main wrapper for your page which will have a relative position and that you center horizontally on your page (using margin: 0 auto; for example).
Then add inside that wrapper a <nav> for your top navigation and set its css position property to fixed, and then do the same for the sidebar with a <aside>.
Then add inside the wrapper a <div id="content"></div> for instance for your content and set its css position property to relative. If you want the content of this div to scroll vertically, you can add the following css : overflow: auto;
If I understand you well, you want your content to change without the page being reloaded & that the content scrolls, but not the rest.
You can :
Wrap your content into an iframe, so you can change the content without refreshing the whole page with a fixed height,
Just use a fixed height to your content div, and set this :
#yourDivId{
overflow:scroll;
overflow-y:none;
height: XXX px; //Fixed height;
}
Note : your mouse will have to hover the content to scroll it.
Well an advice?
Create separately three blocks; for fixed Nav, Fixed sidebar(for category) and scrolled main block(article). It'll be easy to order, I guess.
How many Category will display on the fixed sidebar? if the list heigher than window's screen, some category will be hidden unless you make it 'overflow:auto'. also consider about possibility of user resizing the screen.
Happy Coding !
I have a page where the content is floated in the center so that in any browser size, the content div will always be smack bang in the middle.
Now, I've gone ahead and added a sticky footer to the page, however when the browser window is smaller than expected, the footer displays in front of the floated content.
I am not exactly up to speed with how clearing floats works or exactly how absolute positioning affects relative positioning. I am aware that once I make the footer absolute, it becomes independent of all the other divs, which is naturally not what I want, but this is where I am getting stuck.
My question is, how can I make the sticky footer display at the bottom of the page, but stay under (by under I mean below) the floated content if the height of the browser screen is smaller.
Here is an example of my current code: http://jsfiddle.net/ySru9/1/
I have taken the sticky footer code from here: http://www.cssstickyfooter.com/style.css and here http://ryanfait.com/sticky-footer/layout.css
I’m sorry if this is a repeat of another question on SO, but I have trawled through and couldn’t exactly find anything the same. I assume that there is some yucky jquery stuff that I need to delve into?
If you make the footer positioned absolute in your body, but make sure the body has some minimal height greater than your yellow container, this could work:
http://jsfiddle.net/willemvb/PZHvH/
try using:
#container
{
margin: 0 0 0 -100px;
position: relative;
}
Check this fiddle:
http://jsfiddle.net/ySru9/39/
i have a problem with a stuck down footer not been pushed down by 2x DIVs in the main content area.
www.superwideprint.com/swp2
for some reason the 2 content containers arnt pushing the footer down when the screen resolution is low, i have added a clear:both div above the footer but to no avail.
can anyone help me please.
style sheet and main page can be seen from the link above. been at this for hours now.
The footer's position is set to absolute, so the content div is not going to affect it. Setting the position to relative will not help either, as this means your bottom: 0 code will push it to the bottom of whatever it is in, not the page.
What you're after is a sticky footer, try this http://www.cssstickyfooter.com/ or http://ryanfait.com/sticky-footer/
The reason is the #footer DIV is position:absolute. So, remove position:absolute form your footer.
A part from that your want your footer always stay at bottom then you can use Sticky Footer technique. Check this http://ryanfait.com/sticky-footer/
So I know the first thought is "Sticky Footer", but that's not really the case. It's the footer height that's the variable.
I have a page where the main content is 200px margin from the top... after the content, I need the footer to extend all the way down for the remainder of the browser height; there will be a 1600px background image that will repeat-x
Here's one trick. Make your header, content, and footer as you normally would. Set the height of the footer to 100% and give it the position:fixed attribute, and make sure that you don't give it a top, bottom, etc. attribute. This will take the footer "out of flow" but leave it right where it would be naturally (this removes any ugly scroll bars).
you can see it in action in the example demo here.
Why not just make body have the background-image of the footer?
Then, you can set the main content to have whatever background you like, and the footer will appear to extend to the rest of the page.
http://jsfiddle.net/JFtwD/25/
Here is how you could do it. Don't know if it is the best solution, but it is a solution.
Think that you have a content div whether the content of a website is presented. This div has a margin-top of 20px, because it has to have some margin from the header. There is also a right sidebar. Meaning there is an external div, say whole content and inside two floating divs next to each other. One for the content, one for the sidebar. Pretty standard.
Now, i suddenly need to add breadcrumbs to the content. Now, the breadcrumbs should not have any margin from the header. The content, however, needs to have 20px top margin independent of whether breadcrumbs are active or not.
Apparantly, i can just make it so that breadcrumbs is on a different div, right on top of the content div. This would need that the content div will now be split into two divs, say 'breadcrumb' and 'main_content'.
This sounds like a bad idea to me, because i reckon that a breadcrumb is actually part of content. Moreover, i would need to change all my templates in order to present them with this new div and general markup change.
I tried to add a top-margin: -20px to the breadcrumb div, but it's not good, because it gets applied to the other content as well.
Any ideas on how to do that in a good way ?
P.S. The sidebar div does not have the same 20px margin, only the main content has that margin, for its internal content.
Does position: relative; top: -20px; work for you?
Give position:relative for main_content div. then you have to apply position:absolute, top:some-px; bottom:some-px as per your requirement.