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.
Related
I have a webpage with links down the left hand side of the page in a div that is floating left. I then have content to the right of that that is in a div floating right. The problem I'm having is that when the page is resized the content moves below the links.
I have tired putting the whole page in a wrapper div but when I did the links stopped working and I could not position the content where I needed too.
Here is the css for the wrapper div
#wrapper {
margin:0 auto 0 auto;
min-width:960px;
}
Floated elements will behave in that manner, since they're out of the page flow.
What you probably are looking for is a fluid two column layout.
The main problem is that you are giving the divs fixed widths so the first step is to change the widths of the divs to % or em.
Do this full screen to begin with, I would even go as far as creating a blank page with no content what so ever, just give the divs a different background colo(u)r. Do this as you then know the width of the content isn't interfering.
I would also float both divs to the left and maybe position them relatively to begin with.
I figured out the best way to go over the window resize issue is do like wordpress and even this site do: put balnk resizable margins around the page and make all the content fixed width.
"Liquid" style (with percents etc.) is cool but doesn't really look right most times, so the best thing is to build your page a little narrower than the full window and let different brawsers just change the margin size.
To do so I actually style the very html tag givin it a fixed width like 1000px or whatever and then margin-left:auto; margin-right:auto; to keep it always centered.
EDIT:
Put this in your css
html {
width:66em;
margin-left:auto;
margin-right:auto;
}
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/
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.
I have a div-layout on my asp.net page.
Left a div for menu, middle a div for content and right a div for a online user list.
All divs are with float:left and height/width on his place and it works problemless.
Now I must have a advertise over the left and the middle div together.
My first try was to have it in the middle and set margin-left:-270px;.
But the the advertise-div is OVER the menu and you cant click anything anymore.
My second try is to have it in the left div and overflow it easyly on the middle div, but that of course don't work, because the left menu div has a width: 300px; and exacly there end the banner.
here is it to see:
http://s3.imgimg.de/uploads/4b247298bJPG.jpg
how to do?
It's hard to tell without seeing your HTML/CSS, but perhaps the easiest way would be to to put the advert in it's own <div> under all of the left, middle, right divs, and use something like margin-top: -110px to shift it up.
It's not a very clean solution. If you can't get this to work, or just plain don't like it, then post your code.
I have a page that has a header, a footer middle section that should grows to fill the rest of the page.
i.e. it looks like this
Let me describe the layout I'm wanting
header = 100% of page width with a fixed height. I don't want it floating.
content = min width of 760pixels, max of 1000pixels
Height to fill up to the end of the page. But, not overlap the footer. Footer should be pushed down. If content is less than 100%, footer should be at the bottom, not moved up.
footer = 100% page width and always at the bottom of the content.
Now the problem I'm having is making the footer go to the bottom. I can get it to go beneath the content div, but not to the bottom of the page.
How would I achieve that in CSS? It seems awfully hard to do simple things like that.
See this for code on a bunch of different layout formats.
Check my implementation here.
You want position absolute with bottom: 0
You also want to make sure that the z-index is high so that content will flow under it (well, that's really your choice).
If I understand well your question, that will keep the footer at the bottom of the page, no matter the content.
Links that might be helpful :
css-fixed-footer
fixed-footer
an-old-implementation-of-fixed-footer
My thinking would be:
get a min-height attribute set for the content div (might need workaround with IE, as always)
or, get absolute positioning for the footer to bottom and set a negative margin to top, say, if the footer height is fixed to 50px, then set margin-top to -50px
Sorry I am working at the moment so I cannot craft a demo page :)
One critical thing for this design is to verify that the solution works for all contemporary browsers.