Hey there, I've been trying to figure this out for a couple weeks at least. I have some code like this (not the exact code obviously, and this code is inside of an existing layout): <div class="one"> CONTENT </div> <div class="two"> <ul> <li>List 1</li> <li>List 2</li> </ul> </div> <div class="three"> MAIN BODY CONTENT </div> Code (markup): What I need is for the code to look like this, but still have divs one and two displaying above div three on the page: <div class="three"> MAIN BODY CONTENT </div> <div class="one"> CONTENT </div> <div class="two"> <ul> <li>List 1</li> <li>List 2</li> </ul> </div> Code (markup): All divs have a variable height depending on the page, so we can't have any fixed heights in the CSS code. I've been able to make it work with fixed heights in FF. What would be the best way to position these using CSS? Thanks
I don't see a way to do what you're asking. I also don't see why you would do it this way unless you're working with some prefabricated script that spits out data in a specific sequence.
It depends on where you want One Two and Three to appear on the page which you haven't really specified..They can all be shoved exactly where you want most of the time with either the use of negative margins or positioning if need be. Edit: I've just understood your problem a bit better, well if Divs 1 and 2 have a variable height hmm i'm not too sure i'll have to have a go at it myself if I get some time, although i'm sure somebody else will know. If there is no way maybe via the implementation of some conditional statements? It really depends what's going on in Div's One and Two.
I have a client that wants this for SEO purposes. He wants the SE robot to see his actual content first on the page. I personally don't think it's necessary, since there's minimal content in these two divs; plus, search engine bots are more advanced nowadays, and they can easily sift through the content. Thanks for the help so far.
I am 99% sure I know your client - I've only ever had 1 client who requested something so strange (having your subpage links down the bottom of the page decreases their value which is BAD - meaning him going too extreme is actually having a detrimental effect) I did it by putting absolute positioning them all, because the header+menu had a fixed height, and I didn't want to dick around all day trying to figure out a way to do it without absolute positioning. Try this, though: Theory behind that is that the 3rd will go to the top, and I add float so that I can get 1st to clear and go below it. Probably won't work because its absolutely positioned its taken out of the flow, I'll screw around now and see what I can come up with.
Except he said All divs have a variable height depending on the page, so we can't have any fixed heights in the CSS code. Tell your client he's an idiot. If you want his money though, tell him there's simply no way to do what he's asking. If he asks you if you can do it with javascript, tell him not without charging him extra for development time and then add a stupid tax to your bill. Seriously though, tell him to stop trying to game search engines. It's a waste of your time and requesting it only makes him feel smarter. He obviously has no idea what he's talking about. I've had clients ask fairly odd things that only the uninformed would ask, but this is just stupid.
Right, except you're providing an answer to a question he didn't ask... The question wasn't could he order them in the desired order with fixed or fluid heights, he said fixed and fluid. He specifically said he couldn't have it fixed, yet you provided the answer anyway. That's the point I was making.
mostly if you make your divs on the position:absolute; has cross browser issues, be sure to deal with this issues.
There is no answer to his question, so I provided him with an alternative solution that he can present to the client.
Sigh. You realize that you are trying to teach calculus to a 1st grader right? People like this will simply never understand what your telling them. I deal with idiots on a daily basis and if they want to run into the wall five times before they say: "Hey that hurts" Then I say pull up a chair and crack a brew because it is entertaining. Now on to your answer. You can do this with some crafty usage of floats. But I highly recommend staying clear of it. Targeting your keywords for SEO should be done elsewhere and not force a complete navigational change. I would much rather see you spend 2 weeks on .htaceess mod rewrites for articles and terms you are going after. Anyway. good luck bud.
Thanks for the help, guys! I suspected that this was not possible with variable heights, but this confirms it. +Rep to you all. Thanks!
Reminds me of a period when I was receiving constant requests for special code hierarchy while working with CSS and content columns. Pushing less important side column source (advertising blocks etc.) to the bottom and let the more important go up the top for SEO purposes. This is probably a case with similar scope, however impossible to achieve.
You know... Hmm. This is a good one. *** Cracks Knuckles *** There is a quirk of the overflow:hidden property combined with position:relative on the body tag in relation to absolute positions that go off the bottom of the page in standards compliant browsers, that combined with IE's mishandling of height:100% can... Yeah, check this out. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title> inline demo </title> <style type="text/css"> * { margin:0; padding:0; } body { height:100%: overflow:hidden; position:relative; } .three { position:absolute; top:100%; background:#EEF; } .two { background:#FEE; } .one { background:#EFE; } </style> </script> </head><body> <div class="three"> <p>MAIN BODY CONTENT</p> <p>MAIN BODY CONTENT</p> <p>MAIN BODY CONTENT</p> <p>MAIN BODY CONTENT</p> <p>MAIN BODY CONTENT</p> <p>MAIN BODY CONTENT</p> <p>MAIN BODY CONTENT</p> </div> <div class="one"> CONTENT </div> <div class="two"> <ul> <li>List 1</li> <li>List 2</li> <li>List 3</li> <li>List 4</li> <li>List 5</li> <li>List 6</li> <li>List 7</li> <li>List 8</li> <li>List 9</li> <li>List 10</li> </ul> </div> </body></html> Code (markup): Never say never. Does NOT work in IE 5.x (oh well), but does work in IE6, 7, FF, Opera and Safari. In IE height:100% is treated as min-height, but overflow:hidden makes it collapse. In standards compliant browsers height:100% becomes height:auto because html doesn't have a height set on it, but it still trips height calculations for % measured from the top. Net result, an absolute position at the bottom of your 'in flow' content that WILL give you scrollbars. The only part of it that's 'broken' in IE 5 is that the content appears after the bottom of the screen height. Damn I'm good.
Well, it IS cross browser compatable since it works in everything IE6 or newer - Seriously, how many 'new' pages work in IE5 in the first place. and at least said 'quirk' is valid code AND is how the specification SAYS it should work.
No-one likes a hero He said the source should be in this order: 1,2,3 and appear in this order: 3,1,2 Your example has the source in the order 3,1,2 and appears in the order: 1,2,3
Uhm, no. No he didn't... Which is what I did. Above code, rendering 1,2,3 - Can't people READ anymore? Side Note - I have the feeling div one should be a h1, and that there shouldn't even BE a div around the UL since that's most likely the main menu.
This is what I read: Meaning that's what he wants the source to look like, but wants it to display on the page like example #2. Now I re-read the post 10 times, it sort of, possibly, makes sense. He could have said all of that in half the space and it would have made sense to start with. What he wrote above was like a massive double negative. Almost like bad directions "drive along, see that next left? ignore it and keep driving. you'll see a petrol station on the right, keep going for 400m and you'll come to an intersection, keep going. take the next right" When a simple "drive straight, take the first right after the intersection" would have done the trick. And yes, I always get lost with bad directions, I'm too busying looking for all the stuff I'm not taking I can't remembering what I am taking