Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>When I design my layout using CSS, I generally give every major section its own root (body level) div, and use relative/absolute positioning to get it into its proper place. This is a bit more flexible than tables, as I'm not limited to an arrangement that I can represent using rows and columns.</p> <p>Furthermore, if I decide that I want to rearrange the layout (say I want the navigation bar to be on the right now) I can simply go and alter the position for the elements in one place (the CSS file) and the HTML doesn't have to change. If I were doing that with tables, I would have to go in and find the information and do a lot of attribute modding and copying and pasting to get the same effect.</p> <p>In fact, using CSS, I can even have my <em>users</em> select how they want their layout to work. So long as the general size of the content areas doesn't change, I'm perfectly OK with using a bit of PHP scripting to output my CSS based on user preferences, and allowing them to rearrange the site to their own liking. Once again, possible with tables, but much much harder to maintain.</p> <p>Finally, CSS allows one MAJOR benefit that tables will never provide: the ability to reformat content based on the display device. CSS allows me to use a completely different style set (including position, formatting, etc) for a printer than the one I use for the monitor. This can be extended to other media as well, an excellent example is Opera Show, which allows a cleverly designed (and very standard) CSS enhanced page to be viewed as a slide show.</p> <p>So in the end, flexibility and management are the real winners. Generally, CSS allows you to do more with the layout. There's nothing <em>technically</em> nonstandard about a table based layout, but why would you want to limit yourself?</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload