DIV Tags – How You Can Use Them to Organize Your Web Design

DIV Tags - How You Can Use Them to Organize Your Web Design

DIVs are just another really simple tool that can make customizing your website really easy if you know how to use them. Have you ever wanted to add two content areas side by side, but just not know where to start, or maybe you want to make a grid but you just can’t figure out how. DIVs will get you there.

DIV Tags - How You Can Use Them to Organize Your Web Design

What’s a DIV?

The first thing you need to understand is what a DIV actually is. Div stands for division, and represents a section of an document. DIVs are used to divide your document into sections and provide a hierarchy. Usually there is a page DIV that holds everything on the page, then a header DIV that holds the logo and navbar, while a main DIV might hold the content and sidebar. It get’s complicated on WordPress since there are so many DIVs inside one another, but luckily you don’t really have to understand that. All you need to know is that you can use DIVs to customize your content.

How to use DIVs

Say you want to divide your page into two halves, so you can put some content on the left and some on the right. All you have to use is DIVS. Just create two DIVs that are each half the width of the page. You use selectors like classes and IDs to define them and then target them in your CSS. If you don’t know what classes and IDs are, you can read my post Classes & IDs – Understanding Selectors & How to Use Them.

If you are going to use this layout often with two DIVs each half the width of the page, then use classes so you can come back and use this selector whenever you want to. I use this kind of layout on pages like my contact page and my newsletter signup page. You can see on both that I have the page divided into two halves, with some content on the left, and some on the right.

The html code for this that you would write in the body of your WordPress post would look like this:

Then, to make each DIV take up only half the page, you target it in your child theme‘s style sheet like this:

And that’s that. That would give you two divs sitting side by side, each half the width of the page. The 50% is obviously the width, the display makes them sit inline, or next to eachother, and the float makes them float on the same plane next to eachother.

If you wanted three divs next to eachother instead, you would just add another DIV in the html content and change the 50% to 33%, and four DIVs would be 25%, and so forth.

And that’s all! You can put whatever you want in your DIVs – images, text, videos, you can even just make them coloured and decorative. You can do anything at all.

Do you use DIVs throughout your site?

2 thoughts on “DIV Tags – How You Can Use Them to Organize Your Web Design”

Leave a Reply

Your email address will not be published. Required fields are marked *