23

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.)

3
  • Css is style, html is design+style. Order of elements is a design-task in general, not a style-task. But: Adaptive Design may break this rule.
    – Grim
    Commented Jul 22, 2014 at 10:37
  • @PeterRader HTML is for structure. Calling it design is misleading. Design encompasses structure, style, and behavior. This is handled by HTML, CSS, and JavaScript respectively.
    – spex
    Commented May 3, 2017 at 20:17
  • Thank you for the answer. Yes, its little behavior and missleading.
    – Grim
    Commented May 10, 2017 at 7:00

8 Answers 8

38

CSS can take elements out of the normal flow and position them anywhere, in any manner you want. But it cannot create a new flow.

By this I mean that you can position the last item from the html document at the beginning/top of the page/window, and you can position the first item from the html document at the end/bottom of the page/window. But when you do this you can't position these items relative to each other; you have to know for yourself how far down the end of the page will be for the first item from the html document to be positioned correctly. If that content is dynamic (ie: from a database or CMS), this can be far from trivial.

9

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.

3

You may want to look at CSS Zen Garden for excellent examples of how to do what you want. Plenty of sample layouts via the links on the right to see the various way to move everything using strictly CSS.

3

There are a couple of ways of doing it today. The first one works on more browsers but is more limited:

  1. Using the CSS display values of table-caption, table-row and table-cell allow vertical ordering of at most three elements controlled exclusively with CSS.

  2. This is much more recent and will only work in all latest browsers (yes, it will fail in IE9): Use of the flexbox CSS properties.

You can view live examples and read more about these techniques at the "this is responsive" patterns page. The two I'm talking about are in the section titled "Source-Order Shift"

2

You don't need position:absolute on every element to do what you want.

You just use it on a few key items and then you can position them where-ever you want, moving all the items contained within them along with the root element of the section.

1

I think that the most important factor is to place your html elements in a way that makes sense semantically, and with luck your layout in CSS will not have to do too much work. For example, your site's header will probably be the first element on the page, followed by common navigation, then sub-navigation, content and the footer (incomplete list).

Probably around 90-95% of the layouts you'll want to work with should be relatively trivial to manipulate that markup into something like what you're after. the other 5-10% will still be possible, with a little more effort, but the question you need to ask yourself is "How often am I likely to want my site header positioned in the bottom-right corner of the page?"

I've always found that the layout of a site is not too tough to manipulate after the fact if you do want to dramatically change the look and feel, at least in comparison with a ground-up recode.

</2c>

0
1

You can position individual boxes completely independent from the source order using position:absolute. So you can move the header to the bottom of the page, and the footer to the top using CSS.

Note however that this is genereally bad for accessibility: You should have the order of the content in the source more or less in the same order that you would present it for the reader. The reason is that a screen reader or similar device will present the content in the order it is defined in the source rather than the visual order defined by your CSS.

0

Good point about the header always being first and the footer last! But I might want to move my advertising DIV from along the top, to down the right.

The other thing I've heard about is putting the content DIV first, so Google pays you more attention (relevant keywords near the top of the page score higher)...or is that a myth? Doing that would require the sort of CSS trick I'm enquiring about too.

1
  • aside from how google sees the page, it's not a bad idea to put your content first anyway. it will load first, plus screenreaders will hit it first, which obviously is good for accessibility.
    – nickf
    Commented Sep 18, 2008 at 13:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.