How to Make My DIV and CSS Elements Look Like a Table Function
The "HTML Table" element is designed for presenting data in rows and columns. Some web designers also use it for page layout, but it is poorly suited to this function. Using DIV elements and CSS to format them is an easier, more flexible way to create a page layout that would have required table function in the early days of HTML. A DIV-based layout will display as soon as it begins to download, while a table layout won't display until the download is complete.
Other People Are Reading
Instructions
-
-
1
Make a block sketch of the page layout you want. For example, you might want a horizontal header bar, a narrower horizontal navigation bar, and a vertical sidebar in addition to a main content area. Decide exactly how you want these sections arranged. Each block represents a DIV; you can use invisible "container" DIVs to keep things arranged properly.
-
2
Give each section a unique name, which will become its "id" attribute. If two or more sections will share the same format, create another unique name for them; this will become their "class" attribute.
-
-
3
Create a new layout file. Depending on your needs, this may use static code (HTML or XHTML) or dynamic code (PHP or ASP). Add DIV tags to the body, using the id and class names from Step 1, in order from top to bottom. Nest DIVs inside container DIVs where appropriate.
-
4
Create a stylesheet with the extension .CSS and link to it from your layout file. Create a section for each layout DIV. Use your id and class names, along with either the id selector (#) or the class selector (.) in front of each.
-
5
Add layout attributes to each id and class section. These can include padding, spacing, border, position, float, margin, height and width.
-
6
Check the layout in several browsers and tweak as needed.
-
1
Tips & Warnings
If you already have a layout file using the table function for layout, it's best to start a new layout file from scratch rather than to try to modify the existing file. Use the old file for reference and copy and paste content as necessary. You can usually recycle the old stylesheet.
Use comments liberally so you don't forget what a section is for or get lost trying to navigate your code as it grows. Indentations and line breaks in the code also help keep the code easier to use.
The "float" attribute does not work exactly the same way as right and left alignment in a table. If your layout is broken, review your CSS referrence to see if you need to change the way you use "float."
Different browsers may display your layout differently. A layout that is beautiful in Firefox may be broken in Internet Explorer (or vice versa). Check your layout in multiple browsers.
