Swapping Column Positions in Web Page Layouts with Negative Margins - Swapping the position of web page columns
(Page 3 of 4 )
As I stated in the section that you just read, a two-column web page layout like the one created previously can be easily modified to swap the positions of its respective columns. In other words, the consequence in doing this would be that the corresponding side bar now would be placed on the left of the web document, and the main column obviously would be floated to the right.
Of course, to construct this brand new layout I’m going to use the handy negative margin approach, so the CSS styles corresponding to this example now look like this:
/* style header section */
#header{
background: #ffc;
}
/* style side column */
#sidecol{
float: left;
width: 300px;
background: #eee;
}
/* wraps up the main column */
#wrapper{
width: 100%;
float: right;
margin-left: -300px;
}
/* style main column */
#maincol{
margin-left: 300px;
}
/* style footer section */
#footer{
clear: both;
background: #ffc;
}
That was pretty simple to understand, wasn’t it? As you can see, since my intention was simply to revert the positions of the main and side columns within the pertinent web document, I specified a negative value of –300 px for the wrapper of the main column, which also has been floated to the right. On the other hand, the side bar has been floated to the left, swapping the positions between these containing elements.
In addition, the rest of the CSS styles listed above are responsible for styling the respective header and footer section of the web page, so I won’t bore you with irrelevant explanations about how they work.
Well, at this moment, you have learned how to use the functionality of CSS negative margins to invert the respective positions of the two primary columns within a sample web page. As you probably realized, this process is a no-brainer and can be tackled with minor problems.
However, undoubtedly the missing piece of this schema is the structural markup that’s tied to the CSS styles coded earlier. Taking this into account, therefore, in the section to come I’m going to show you the full source code of this two-column web page layout, whose respective main columns have been swapped.
Don’t waste more time; read the next few lines. I’ll be there, waiting for you.
Next: The complete source code for the previous two-column liquid design >>
More Style Sheets Articles
More By Alejandro Gervasio
