Question

If you have several divs on a page, you can use CSS to size, float them and move them round a little… but I can’t see a way to get past the fact that the first div will show near the top of the page and the last div will be near the bottom! I cannot completely override the order of the elements as they come from the source HTML, can you?

I must be missing something because people say ‘we can change the look of the whole website by just editing one CSS file.’, but that would depend on you still wanting the divs in the same order!

(P.S. I am sure no one uses position:absolute on every element on a page.)

Answer 1

With Floating, and with position absolute, you can pull some pretty good positioning magic to change some of the order of the page.

For instance, with StackOverflow, if the markup was setup right, the title, and main body content could be the first 2 things in the markup, and then the navigation/search, and finally the right hand sidebar. This would be done by having a content container with a top margin big enough to hold the navigation and a right margin big enough to hold the sidebars. Then both could be absolutely positioned in place. The markup might look like:

h1 {   position: absolute;   top: 0;   left: 0; }  #content {   margin-top: 100px;   margin-right: 250px; }  #nav {   position: absolute;   top: 0;   left: 300px; }  #side {   position: absolute;   right: 0;   top: 100px; }

<h1> Stack Overflow </h1> <div id='content'>   <h2> Can Css truly blah blah? </h2>   ... </div> <div id='nav'>   <ul class='main'>     <li>quiestions</li> ... </ul>   .... </div> <div id='side'>   <div class='box'>     <h3> Sponsored By </h3>     <h4> New Zelands fish market </h4>     ....   </div> </div>

The important thing here is that the markup has to be done with this kind of positioning magic in mind.

Changing things so that the navbar is on the left and the sidebar below the nav be too hard.