Steve Smith, host of your TQA Weekly, explains how to successfully create a multi-columned or rowed layout using CSS, and demystifies possible coding errors and solutions.
Episode #2-29 released on April 15, 2012
Creating layouts with CSS is a really simple task. Using the DIV tag, and coupled with CSS you can make as many columns, or rows as you possibly need. The trick, knowing the various attributes to make your life easier when creating you web-site.
Whether you need 2 columns, 3, 4, 5 or even 6 or more or whether you need 2 rows, 3, 4, 5 or 6 or more, CSS is the ideal problem solver. We have previously looked into tables, which is nice, but CSS gives us a lot more control on layouts than tables do. What you need to start learning, is a process called planning. Planning your layouts ahead will solve many problems, and reduce issues over the long run.
In practice, planning a layout ahead will allow you to confirm the amount of columns, and / or rows, you will need. You should be able to determine, at this point, what kinds of content or advertisements, or images you shall be placing in each DIV block.
My suggestion while designing such a block, would have to be, use a frame, and separate the frames into subsections. Leave one frame for the header, one for the content, one for the footer, and if necessary, one for the menus. While designing the layout on paper, name all the DIV blocks, giving careful attention to the names. Each DIV block may require a unique name, so start by giving each their own name, and therefore, will be able to control each independently of the others.
If your wondering how and why you should use a frame to block in all the DIV blocks, those are good questions. A frame is just another DIV block with the other DIV elements nested within. Why you should use one is based on a common practice of creating simpler layouts. If you choose to center or offset your content, you may have to use an absolute position to lock each DIV element on the page, or place them all in a fixed sized frame, and you only have to define the actual position of the frame, the internal elements will position themselves relative to the frame, unless otherwise defined.
A few important details to note while programming the position, height and width. The total height is the sum of the height, plus the top and bottom margin. The total width is the sum of the width, plus the right and left margin. The total width of the frame should be greater than the total width of all the elements within, otherwise the last elements on the right or left, may be pushed down causing a common layout issue.
Let's make your first 3-column design. I personally use a fixed width of 1200 pixels, but you can opt for a full 100% or less. Make it as wide as you need. 1200 pixels is roughly 13 inches on laptops, meaning that the web-sites I design work on nearly all computer monitors, laptops, most net books and tablets.
First we need the frame of the layout. Then to create three nested DIV blocks within.
<div id=”frame”>
<div id=”left”>
content goes here
</div>
<div id=”center”>
content goes here
</div>
<div id=”right”>
content goes here
</div>
</div>
Then we need to work on the stylesheet, go to my previous episodes for the exact position and inclusion instructions. In a separate style sheet, create your frame and DIV block element style settings.
#frame {
width:1200px;
margin-right:auto;
margin-left:auto;
margin-top:0px;
padding:0px;
text-align:left;
}
#left {
width:320px;
padding:5px;
float:left;
}
#center {
width:730px;
padding:5px;
float:left;
position: relative;
}
#right {
width:130px;
padding:0px;
padding-top: 5px;
text-align: center;
float:left;
}
This is the exact code I use to run the content section of the TQA Weekly, web-site. With real working versions, we can all do something better than a demonstration. We are committing to a real working model. Go to tqaweekly.com, and follow along. With the advert of current CSS, we can't use an align attribute to center the DIV blocks, this would only align the content within. The answer to the alignment issue, was to automatically define the left and right margins. You can see this on the second and third line of the frame attributes. In order, to define the position in sequence so that the three DIV blocks align themselves from the left to right, we apply a text-align attribute, and give the value left. Each block is given a float, the value being left, a width and padding value, of which the padding, and width, of all internal blocks is less than the total width of the frame. This is to prevent the knocking down of content. This is the simplest way to create a three column layout.
If you wish to have more advanced way of making layouts, I invite you to look at the source code of my web-site, and any other web-site. If your using Google Chrome, you can click on the link in the source code to see the stylesheet and see how the programmer made it work.
Next week, I'll talk about Gzip and how to integrate this into your web-site. I'll talk about why you should do this, and the speed benefits it brings, and how that affects your traffic.
Remember to like, share and subscribe to TQA Weekly. For more information like our show notes, how to join our mailing list, get your own TQA Weekly branded gear and apparel, or for our Android Application, please visit tqaweekly.com. Stay safe and online, have a great day!
Host : Steve Smith | Music : Jonny Lee Hart | Editor : Steve Smith | Producer : Zed Axis Productions