Positioning of content columns CSS and HTML
Update: Paceville.com is now online.
This time we’re going to position the columns which will hold the content, all three of them. As I’ve said prior in this series this layout will not sport columns with flexible width so we don’t have to worry about that. However there will be some legacy flexible stuff left from the YAML example I chose to work with, which we’ll get to shortly.
Demo here.
Note that I only show additional CSS and HTML below, feel free to browse earlier parts in this series to get the rest of the CSS/HTML in the demo explained.
. . .
p{
line-height: 1.2em;
margin: 0 0 1em 0;
}
#main {
padding: 5px 10px 10px 9px;
}
#col1_content,
#col2_content,
#col3_content{
margin: 0 5px;
padding: 10px 0px;
}
#col1_content { padding-right: 5px; }
#col2_content { padding-left: 5px; padding-right: 5px; }
#col3_content { padding-left: 5px; }
#col1 { float: left; width: 210px}
#col2 { width: 470px; float:left;}
#col3 { margin-left: 670px ; }Note here that both the left column (col1) and the middle column (col2) are floating left and the right column (col3) has a wide enough left margin to compensate for this and stay to the right of the other two. Had we had a width: auto on the parent divs with for instance min-width and max-width we could’ve set width: auto on col3 too to let it expand in a flexible way. That’s not what we want now though, so it will stay fixed since the parent stuff is fixed at something in the vicinity of a width of 250 pixels.
Sure we could’ve gone for a solution similar to the one we employed with regards to the menu, ie having the the divs be left | right | middle and then using the clearfix class to make them line up next to each other. I’m lazy though and quickly discovered that the above worked just as well so I left it like this.
Note the use of margin: 0 5px which means we want top and bottom margin to be 0 and left/right margin to be 5 pixels. Note also the padding of 9 pixels to the left on the main div which holds all the columns, that’s the kind of numbers you get in real life when you try to implement designs from PSD to HTML and want stuff to look exactly like in the PSD.
. . .
<div id="main">
<div id="col1">
<div id="col1_content" class="clearfix">
<p>Left column content. And some more more more moremore moremore more.</p>
</div>
</div>
<div id="col2">
<div id="col2_content" class="clearfix">
<p>Middle column content. This is the widest column, yes it is, very nice yes yes yes</p>
</div>
</div>
<div id="col3">
<div id="col3_content" class="clearfix">
<p>Right column content. With something to fill fill fill fill fill fill fill fill</p>
</div>
</div>
</div>
. . .The HTML, note the left | middle | right lineup as opposed to the left | right | middle arrangement we used with the menus. That was it for this time, in the next piece in the series we’ll fill the columns with various content, which is the easy part.