I'm trying to figure out if it is possible to reorder divs visually using CSS. I've been stuck on this all day. This is a test that I am doing with a very simple test page. I would like CSS to display Section 1 at the top with Section 2 beneath it, and then section 3 and then Section 4. Does anyone know if this is possible, just using CSS? Here is the test file: <html> <head> <style type="text/css"> </style> </head> <body> <div id="container"> <div id="section4">Section 4</div> <div id="section1">Section 1</div> <div id="section3">Section 3</div> <div id="section2">Section 2</div> </div> </body> </html>
If each of the different sections are going to remain a set height, then you could do it with "position: absolute" in each the divs CSS as well as: "top: 0px" for section1 "top: 20px" for section2 and so on. You might also have to put "left: 0px" in each of the sections' CSS and any other page flow after the section divs could be hindered. What are you doing this for? (If you don't mind me asking) JR
Unless I misread what you wrote, it should be simple. Float them all left with a width of 100% and then build your page like this: <div id="container"> <div id="section1">Section 1 place content</div> <div id="section2">Section 2 place content</div> <div id="section3">Section 3 place content</div> <div id="section4">Section 4 place content</div> </div> ( close the container div) You might have to use br clear to clear some floats if the format breaks. Both of the site in my sig use this exact process but in a 3 col format. Visit and copy the souce to see how to construct your page. edit: the first two sites use this format.
Colbyt, dspohn23 has the structure set up a certain way. Now, this CAN be done with floats and negative margins, but I'm going to need to know how tall and wide the containers need to be first before I can show you how to do it.
Dan Schulz- the divs will all be the same width, but they will vary in height, depending on the dynamically generated content that is inside of them. Is there any way for me to specify that "section2" will be below "section 1"? and "section 3" will be below "section 2"?
could you use the absolute reference tag? it seems like it would be more hassle then just change the content.
No, because absolute positioning would remove it from the flow entirely and cause non positioned elements to overlap.
Maybe I am dumber than a rock. Or maybe I failed to understand the question. Maybe I am the bunny wearing the device. Why don't you guys take a look at this page and tell which I am. The source code is there and you can see what I did. Or is that what you wanted do?
Good one Colbyt. The reason why I was going to try to do it, was so that I could have text in the html that was in a different order than how it was displayed on the screen. My goal was to be able to take content that would be considered duplicate content by Google, and then reorder it in the HTML so that Google would not recognize it as duplicate content. Then with CSS it would be put back together for the reader of the page. I just wanted to try it out, to see if it would work.
Again, that won't work because Google doesn't read text in the way it appears in the browser. It reads text in the order it appears in the HTML source code. Same with the other search engines.
Yes, Dan that is exactly why my sections would need to be out of order in the HTML. I might just try something else. I'm thinking of detecting when the googlebot is loading the page and serving the bot a different page then regular browsers. I could reverse the order of the words in the content like this. "This is a sentence" would be reversed to "sentence a is this". I would think this would beat the duplicate content filter. But maybe the content filter, is more than just word order, perhaps it is word counts and word proximity.
That will get you banned from the search engines for cloaking. What is so bloody important that you have to hide it from Google anyway?
Maybe you want to simply tell googliebots to avoid that page. They would honour a robots.txt with User Agent * Disallow.
Could you specify what you want to do? I don't understand you at all. By default, divs will be displayed from top to the bottom as they are in the source code, i.e.: This will display two rows... first one at the top. Then you can further style them using floats and margins. Be more specific and I'll help you but now I have no idea what you want to do.
He wants the second and fourth DIVs to appear above the first and third DIVs while retaining their position in the HTML source code. Something that's just not possible without declaring a height on the affected DIVs.