Hi guys, Hope someone slightly further ahead in CSS than me will be able to answer this one fairly easily. Consider the following case in isolation; <div style="width:200px;"> <div style="background-color:#006666; width:200px;">one</div> <div style="background-color:#333333; width:200px;">two</div> </div> Code (markup): If I want 'one' to appear BENEATH 'two' on the page, how can I do this? The height of one and two are both variable as they have content being written to them from a database. The simple answer would be to swap them round in the code of course but I want to know if it can be done with CSS. For example if 'one' carries more weight with SEO than 'two', but not in terms of where I want them to appear on the page. Thanks.
To my knowledge there isn't a way to do this. Some CMS's (like ExpressionEngine) have add-ons you can use to do this where you and have an html snippet in one place and move it to another without changing code, but with CSS, no I don't think it's possible.
Thanks for the replies. To clarify, here's a diagram. I want Content 2 to actually be above Content 1 in the HTML, but not on the resulting presentation.
SEO makes no sense for this. Most pages have a header, a bunch of crap including menus, side columns, ads and links, and THEN the content. A robot landing on such a page with read it all. For robots and accessibility, you could add a "skip" link at the end of your header code. If a robot follows it, it will be brought directly to the content (which it would get to anyway). Position on a page are only one thing in a list of 4000 things robots use to determing what a site is about and what's most relevant.
With columns, yes, easily. With full-width divs, I'd think you'd need to absolutely position one of them... the problem being that, while if you don't declare a height it will grow to fit content, it will NOT push down the one below it. Maybe you can float the second box you have in code and force it above the first with abuse of negative margins? Floating the box takes it somewhat out of document flow so you can play more with it. Dunno if it could then push down the second box though, as it's out of flow.
Stomme poes OK if you would like to look like ska_mna pointed out in his post you could use float:left;clear:both; on all the divs. Now if you would like to layer or stacked on top of each other then you would need to use positioning whether relative or absolute. If you want them in layers I would insert them into another div then position them absolutely inside that div with a top and left px value then use the z-index property to layer them. I hope this explains some things.
If you floated the divisions left and used a clear both, then they would appear under one another in the exact order they're currently at. one two And what's the point of clearing BOTH if you're only floating LEFT? Why are you talking about a whole different topic? He didn't ask anything about overlaying or putting elements on top of one another.
soulscratch Thanks for the insult I think it very childish on your part. I was confused with his question so that is why I answered the way I did. I tried to clarify in my answer the difference and believe I actually have. Sample code one thing to also mention is that when using floats and clear you can certify that when you use a margin to separate the divs with a margin it will work perfectly in all browsers. I <div id="header" style="height:auto;width:200px;float:left;clear:both;">some content in a div or span float left if you like.</div> <div id="body" style="width:200px;height:auto;float:left;clear:both;"> <div style="background-color:#006666;height:auto;width:200px;float:left;">one</div> <div style="background-color:#333333;width:200px;height:auto;float:left;clear:both;">two</div> </div> Code (markup): if you are using a compliant doctype then this will work in all browsers. I am certain this will work perfectly in all browsers except IE 5.5 or less in quirks mode.
So what you're saying is.. you didn't even test that? http://amthx.inimino.org/FAIL.gif EXACTLY how I pictured it in my head