The company I work for, Navega Bem, has an interesting team to say the least. Each of them have very specific skill sets and personalities, but what makes it the most interesting is that almost everyone performs a very specific job.
With this said, I’m mostly responsible for technical assistance to our customers, fixing small mistakes in websites and putting together all of the designs my colleagues put together. What makes that task interesting is that they know very little, if anything at all, about HTML and CSS.
This results in some very awkward designs that make my life a living hell, though I admit they help me tackle some unusual design issues. Today’s task was to make a layout that could be either 2 or 3 columns. And I wanted to achieve that without resulting to multiple templates for the website, so I used a very simple solution: margins.
This technique is not unique, it has been used before. The advantage in using it is that it’s possible the easiest technique you can use for multiple column layouts, and it’s cross browser compatible (as far as I recall at least).
Of course, something this simple couldn’t possibly be all good, there would have to be some cut back. The cut, in this case, is that you have to sacrifice having your content semantically ordered. The left and right columns’ code comes before your center’s columns. So if this solution isn’t appropriate for you, stop reading now.
<div id="left">Left</div> <div id="right">Right</div> <div id="content">Content</div>
So now that we have our 3 divs, it’s time to float them: left, right and no float, respectively. We will also define the length of the columns
#left {
position:relative;
float: left;
width: 200px;
}
#right{
position:relative;
float:right;
width: 200px;
}
One of the flaws of this type of layout is that if you define margins for the #center div they will start counting from the “edges” where the left and right columns are. In order to duplicate the margins you would have to do one of the following:
- Define left/right margins for #center so that the value is equal to “margin you want”+”width of column” (imagining you want a 20px margin, the margin value would be 220px”
- Define paddings in the columns, making them bigger than they should be and pushing the content to the side
Obviously, if you choose to give the margins to the content as seen in #1, the layout won’t be exactly dynamic, because the text will still be squeezed. It’s nothing a bit of PHP can’t solve, and what you end up with is a box that makes more “sense”, and depending on the design, you will need to choose between one of those two options.
What are the alternatives? Well, they involve making 2 column layouts as you normally would, and floating two divs inside one of those two columns. That is a solid solution, but there’s nothing flexible about it as you need to define widths.
As for your end CSS, it should end up looking something like this:
#left, #right {
position:relative;
width: 200px;
background-color: #CCC;
}
#left {
float:left;
/*padding-right: 20px <-- add this line if using method 2 */
}
#right{
float:right;
/*padding-left: 20px <-- add this line if using method 2 */
}
#content{
margin: 0 120px; /*remove this line if using method 2*/
background-color: gray;
}
I hope this ends up being useful to someone. Have fun, and feel free to ask any questions in the comments.