Laying out your sections: space - the final frontier

I regularly get questions about how to control the layout of the section thumbnails, links and teasers.

The sections boxes have three things at play that control the overall layout of your sections. Put the following at the bottom of your custom CSS to see the three elements:

.sectionsTD1{border: 1px solid blue; padding: 0px !important}
.sectionsTable2 {border: 1px solid red; height: 320px; width: 230px; margin: 10px}
.sectionsTable2 td {vertical-align: top; border: solid 1px yellow; text-align: left; padding: 5px}

The colored borders are there so that you can make sense of what I am about to say, of course remove them once you have what you want.

The blue box is .sectionsTD1 and should be considerd the container for the section. You dont need to do much to it, although you can set a height or width to give a consistent look. I typically only set padding:0px !important and then leave it alone and use the next two.

The red box is .sectionsTable2 which is the one that you will control the most. To space out your sections, you can set a margin on this, either one right around, or a left, right, top or bottom. You may also want to set a height and width to force a consistent border and size.

The last box, the yellow one (.sectionsTable2 td) is only needed for alignment purposes. By default, it is set to center horizontally and middle vertically. You can change text-align to left, right and center. You can change vertical-align to top, bottom or middle.

Finally, a brief note about margin and padding. Margin is the space that is created on the outside of the box, padding is the space created inside the box. Both of these have a part to play in spacing, but do behave slightly differently in some browsers. Play around and check it out to make sure you are happy.

23.11.2007. 14:13

This article hasn't been commented yet.