Hi I was wondering.. I am having some junk in my header which i would like to apepar later in the Source Code. OK so this junk floats to the right and is at the top of the page. How could I make the junk do this but appear later in the source code? It still needs to be floated to the right also, so it moves with the browser window! Setting position absolute with top:0, shoves it at the top of the page, but then the float: right no longer seems to work. Negative margins work, but the height of the page will be unknown so i couldn't set a known negative top margin?
You said a header, so it's always at the top right? Yesh, you could absolutely position it both from the top and the right, so no need to float, so long as the abso-po'd element's parent is the body (thus the viewport) with position: relative so that it sticks to the right side. Not sure that it matters how high the page is with negative-margin-wrapped floats. This is the better solution I think but it depends... If you want content first for SEO it's easier to give a skip link to the blind. Teh googles will see it too and robots can use it to skip to the content easily (just remember an inline can't be direct child of the body, so should maybe be first thing after your opening wrapper/container tag). *edit nevermind, I understand now... you could always give the main content a fixed amount of top-margin or top-padding if the header is fixed-height. Then you can absolutley position it and it doesn't matter how long the page becomes.
Thanks for the quick reply. Sorry for the noob question but how to I position the DIV so it sticks to the right of viewport i.e floats the the right?
Well wait, do you want it to float or abso-po'd? Something which is floated righ will go to the far right of its parent unless you have some margins in that direction. So, if this thing you're floating isn't sticking to the viewport, then it's not a direct child of the body OR maybe for some crazy reason you have sidemargins on the body or the float? If you've got a fixed-width container and the float's in there then yeah, the float can only get to the right side of the container. Here's what I mean: <doctype, html, head, jazz> <body> <your float> <other stuff on the page> </body> Here, the float is a direct child of the body. Now, my server is back up, yay! But I don't know the width of your header, since if he was 100% wide you wouldn't see the difference. http://stommepoes.nl/Tests/headersecond.html This is with abso-po'd header, width 80% so you can see it stick to parent body, however both with abso-po and with a wrapped float the problem would be that the height of the header may change and then how do we keep the rest of the page pushed down? That, you can't.
Thanks very much for your explanation, i've got it now!! Thanks for the example also the visual really helps. I'm new when it comes to positioning, i've never really played around with it as I learnt with floats I guess. I never knew that right: 0 would keep it to the right of the page!! Thanks for the lesson it's really appreciated. It's not the whole header im shoving below the content but rather some other junk contained in the header which really delays SE from seeing the content imo. However this raises the question, would it be worth moving the whole header below the content DIV's? Or do SE robots expect the header div hmm. I'm also going to look into Skip Navigation sometime this week, along with adjusting font-sizes + contrast as i'm currently in an accessiblity mad pshyco craze!!
Robots have been crawling through steaming piles of code for like ever... they are rather capable of getting through gargage (pronounce it French so it doesn't sound so bad) to the rest of the content : ) Unless the page is ungodly huge, a robot will try to get through the whole page before leaving (not necessarily the whole site though) so it's not as big a deal as some so-called SEO-experts say. That said, it really depends on how the page design is whether you can get away with the float... if you have the whole float-left, margin-left -samewidth etc then the content part of the page needs to have that same amount of space for the float... meaning like it is at stommepoes.nl where the sidebar is wrapped but see the content makes room for it with a right margin. It's a float but in this case acts a bit more like abso-po'd elements so text won't wrap under it etc.
Are abso-po'd things better than floated things? i use floats for everything, should i be using pos:abs;?
In most cases you'll want to use floats and margins (including negative margins) instead of absolute positioning. That said, there are rare instances where you'll want to absolutely position an element rather than float it, especially if the only viable alternative is using a steaming pile of hacks just to get one or two browsers (IE 6/7, I'm looking at you) to do the right thing.
Spread the wisdom, Dan, what's going on with IE? Do you mean the floats-getting-wrapped deal or the IE7-ignoring-bottom-margins-on-negative margined floats thing?
Wouldn't it be possible for an independant company to publish a standard set of guidelines/rules which all browsers must adhere to in the same way. Thus ensuring that all browsers display CSS in the same way? It really can't be that difficult can it? This would surley avoid differences in the way FF and IE display and avoid cross-browser problems for ever For example all food must adhere to regulations, so why can't we have it so that browsers do, for example so that all browser must provide support for bottom margins on negative margin divs. I know i'm writing this in pretty basic terms but you get the general idea I hope.
It wouldn't be practical unless the W3C was abandoned in favor of ISO, and I don't see that happening any time soon. Especially given that Microsoft barely pays lip service to the ISO standard anyway, as well as ECMA.