how should I order my divs?

Question

Here's the basic layout of a page I'm working on:

What would be the best/easiest way to order the divs? C may or may not be visible (it's a news alert that only displays when there is news). A = Header, B = Menu, E&F = standard content columns, D = latest blog post. I'm thinking ABCEFD might make the most sense, but I could also see ABCDEF. Either of those should be fairly easy to do right using floats... is there a better way? Maybe put CEF inside a "middle column" div?

Answer 1

You'll probably have to do something closer to ADBCFE.

Remember that divisions floated to the right have to appear first, then divisions floated to the left, then the main division that will expand between them. So A will obviously be first. Then D will float to the right, B will float to the left. It is a good idea to use a separate division for the middle and put C at the top followed by F floated to the right and E floated to the left, or however you want those two to work out in the middle there.

Answer 2

I would make a header div = a and a body div {b,c,d,e,f}. Inside the body div i would group {e,f} or maybe {c,e,f} in a div

But thats just my 2 cents

Answer 3

There are many ways to do this. Here is what I would do:

<div id="header"></div>
   <div id="A"></div>
</div>
<div id="main">
   <div id="left">
      <div id="B"></div>
   </div>
   <div id="center">
      <div id="C"></div>
      <div id="E"></div>
      <div id="F"></div>
   </div>
   <div id="right">
      <div id="D"></div>
   </div>
</div>

Answer 4

Consider accessibility when choosing what order to put your divs in the document. For example, screen-readers tend to read from top-to-bottom in markup order, so putting the content (C, E, F, D?) earlier in the page may be better.

If you can't make a workable CSS layout with your content arranged that way, at least consider adding a link with a target that jumps to the content so that people who use screen readers navigate your site more efficiently by jumping over the (presumably static) header and menu when viewing multiple pages on your site.