Category: CSS

Table Based Layouts Unnecessary (Part 1)

More and more often as I develop websites for companies located around Niagara Region (Fort Erie, Niagara Falls, St Catharines, Welland) I am seeing table based layouts for websites. Table based layouts depend on an html table to do all of the layout and often have many tables inside of tables creating an extreme amount of html vs content.

Table based layouts should have died out: CSS has increasingly become more and more supported. It is very difficult now to find a web browser that doesn’t at least support large chunks of the W3C Starndards.

The use of tables is now actually interfering with building a better, more accessible, flexible, and functional Web. CSS is easier maintained and changed compared to a large table based layout: less clutter and a great separation between content and presentation.

Problems with using tables

  • Redesigns of existing sites and content extremely labor intensive (expensive!)
  • Large file sizes: slow loading pages & more expensive hosting costs
  • Pages aren’t very accessible to users with disabilities or different devices (phones, pda, ipod, iPad.)
  • Simple change to table layout may take hours across multiple pages.

Benefits to using CSS Layouts

  • Content is much closer to top of file.
  • Allows extreme flexibility in positioning
  • Allows graphics to load later while user views text.
  • Changes only need to happen in 1 file.

Centering a DIV Horizontally

Assuming you have a basic knowledge of css and html putting a div in the horizontal center of a containing block isn’t too difficult. I’m going to center a div with only text, but the exact same css may be used for a div containing images,inputs, etc. I’m going to assume you are using html or xhtml strict and have a div that has the following code:


<div id="toBeCentered">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</div>

All new web designers and developers assume that the css can simply be text-align:center; , but this isn’t correct because this centers the contents of the box instead of the box itself.

#toBeCentered {
text-align:center;
}

To make the div center horizontally we need to ensure we do two things:

      Set a width to the div
      Set the left & right margins to auto. Web browsers are required to give the margins equal width which will set the div exactly in the center. works width.

We must instead change the css to auto the left and right margins and must set a size to the div. Setting a size to the div

#toBeCentered {
width: 200px;
margin-left: auto;
margin-right:auto;
}

Hope this helps!