3 column code. Is this good?

I was wondering if my code would be considered good/clean. Is this an industry standard or could it be made better/more compatible?


.clear {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.col3, .col3_last{
	width: 320px;
	height: 160px;
	background: #ccc;
	float: left;
}
.col3 {
	margin: 0 10px 10px 0;
}

Now my reasoning is that there will be 3 columns in a row. I want to have the 10px spacing between col 1&2 and another 10 between col2&3. I DO NOT want the last col in each row to have 10px right margin.

What would you change? Is there a more politically correct way of naming columns? I’m not using a grid layout with this particular template.

edit: Clear div would go after each row to prevent collapsing parent.

Hi Mezner. Welcome to SitePoint. :slight_smile:

That code looks fair enough. Two things, though:

I always warn against using heights on elements, as it’s too easy to have content spilling out of them. It’s generally better not to set height on the web.

The other thing I’d question is the clearing div. You don’t really need that. (It’s a bit of an old way to clear elements.) The easiest way is to add overflow: hidden to the parent element, which works in most situations.

Welcome to Sitepoint, Mezner.

It would be best if you posted BOTH your HTML and CSS in this and future threads, as assessment of one goes hand in hand with the other. :slight_smile:

But for now, I can say that CLEARING ELEMENTS (eg: <div class="clear></div> .clear{clear:both}) are not best practice AT ALL. Generally, using empty or unsemantic tags is to be avoided. IN your CSS you seem to have used HALF of a technique to accomplish this, commonly known as “clearfix”.

.clear[COLOR="#FF0000"]:after[/COLOR] {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

You’d then add .clear ( or .clearfix) to the elements containing floats you want to clear.

Still that is not the BEST practice today (and that technique also had problem with older versions of IE). The best practices is brought to us by this forum’s own PaulOB and I personally find that it solves about 85-90% of my clearing needs. Simply give overflow:hidden to your container element … that’s it. Nifty, semantic and cross browser friendly.

Ralph snuck in on me again… I really have to learn to type faster.

Setting Heights ( especially in px) is not a “sin” but its definitely not good planning or or a best practice for accessibility. Rember a web page IS NOT a print layout… and content can be added or removed which is MORE or LESS that your declared height… WHAMMOO!!! Also the user can enlarge or reduce text size to accommodate his/her needs , which means even if you fit your content to your declare size the text size can change… breaking your layout. It is best not to do graphic/layout design that paints you into a declared height corner.

Thanks for the welcome guys, came here to really try and refine my css skills. I never could really understand the overflow property, so thanks for the heads up. I already took the clear fix out and it’s working like nothing happened (and more clean!!).

The reason why I had the equal heights is because I wanted them to be equal. I read an article I found on Smashing Mag and there didn’t seem like there was a good solution to making all the columns equal in height based on whichever is the tallest (or has the most content). Here is the article

edit: they have to be equal, because I will have buttons on the bottom and it would be nice to have them lined up across the row.

Using display: table is pretty viable these days (just have a basic fallback for IE7 and under), but there are more sophisticated options, too. As DP mentioned, Paul O’Brien has worked out some pretty clever options with CSS, listed here:

http://pmob.co.uk/pob/equal-columns.htm

See this link in particular:
http://www.pmob.co.uk/temp/3colfixedtest_explained.htm

It’s kinda a side-effect that overflow clears floats. For the SAME REASON ou can achieve similar effects with display:table; or even display:inline-block; but overflow:hidden; seems to be the most versatile, universally supported and and w/o side-side effects…lol.

Keep in mind display:table may require extra wraps, affect margins and RP/AP. consider experimenting with display:inline-block/ -moz-inline-box; you MAY need to fiddle with width of the container… but not necessarily and I find this method to be cross browser friendly.

edit: they have to be equal, because I will have buttons on the bottom and it would be nice to have them lined up across the row.
then you dont mean just equal height, you mean vertically even spacing???

Here is an image of what I’m working on. It’ll be for wordpress, so I figured I can limit the characters so they will fit within a specified height. Then I can have the buttons on the bottom of the col3 divs.

edit: I’ll check those links out and mess around.

Really, the position of those buttons is determined more by the amount of content in each box than the height of each box. So I’s say just measure out the amount of text in each column and not worry about the heights.