How to Make Columns Using DIV Tags

DIV Tag Columns

DIV tags have a wider range of functions than the common HTML tags. You create a versatile website when you use this type of tool. Regular HTML tables are difficult to design and are not as flexible. DIV tags are part of the overall HTML document. You add these tags whenever you need to place columns inside your web page. After you have the background color or texture written in your document, you will place the DIV tags to make the columns.

Instructions

1. Add the code "<div style='" for each separate line of the columns. This explains the purpose of the initial code.

2. Insert the height, width and border pixels. The code will display so far as "<div style=' height: 550px; width: 220px; border: 3px" If you do not want a border around your column, set the border pixel to zero.

3. Set the color of the border. You can use the same or different colors. Use "Solid" or "Double" for the type of border. Your code will now be similar to "<div style='height: 550px; width: 220px; border: 3px solid black;"

4. Add the alignment. The "Float" command allows additional columns to align next to the first column. Insert "float: (direction);" for the alignment DIV tag. The code up to this point is "<div style='height: 550px; width: 220px; border: 3px solid black; float: left;"

5. End the DIV tag. Close the code with "'>" then shut down with </div>. For example, the whole code is in this format "<div style='height: 550px; width: 220px; border: 3px solid black; float: left;'> </div>".

6. Add another column next to the first with another DIV tag. For example, if you want four columns in a row, this would be the code:
   <div style='height: 550px; width: 220px; border: 3px solid black; float: left;'> </div>
   <div style='height: 550px; width: 220px; border: 3px solid green; float: left;'> </div>
   <div style='height: 550px; width: 220px; border: 3px solid blue; float: left;'> </div>
   <div style='height: 550px; width: 220px; border: 3px solid red; float: left;'> </div>

Tips & Warnings

• Explore the different DIV attributes for diverse columns and styles.

Resources

• Read this Article in Spanish
• DIV Attributes
• Style a Link with CSS