css best practice questions

Question

I have been debating using css with div's and laying out elements, and really am looking to see if the practice i've been using would be considered the best practice, or if there is something different that i'm over looking that would be better.

Lets say we were placing two images on the same line, on on the left one on the right then an text in the ad below it. I might do something like:

#container{
 width:800px;
 height:300px;
}
.fleft{
  float:left;
}
#left_img_container{
  float:left;
  width:150px;
}
#right_img_container{
  float:right;
  width:150px;
  text-align:right;
}
#textArea{
  margin-top:5px;
  width:100%;
}

<div id='container'>
   <div class='fleft'>
       <div id='left_img_container'>FOO IMAGE 1</div>
       <div id='right_img_container'>FOO IMAGE 2</div>
   </div>
   <div class='fleft' id='textArea'>this is my text</div>
</div>

Simple example but illistrates the float kind of layout style. Is this the better practice? or would using clear be better?

Thanks in advance

Answer 1

You can probably clean up your HTML code a bit, and use less classes in your CSS, like so:

<div id="container">
   <img id="foo1" src="foo1" />
   <img id="foo2" src="foo2" />
   <p>This is my text</p>
</div>

#container {
   width:800px;
   height:300px;
}

#foo1 {
   float:left;
}

#foo2 {
   float:right;
}

#container p {
   margin-top:5px;
   clear:both;
}

Answer 2

fleft as a class name is not good practice.

What if your client/boss says, "alright, we want that div on the right?"

You have 2 options... change the fleft class to be float: right, or make a new class and change it in the HTML. CSS classes should be titled by their meaning or description without using descriptive words which include position/colour/size etc.

The only exception I've found to the rule are images in an article. Since they generally float to the left and right, I do use class names image-left and image-right.

Examples

(from a bad name to a better name)

top => header

left-side-bar => menu

bottom-menu => footer

Of course, these are only examples. It's also good practice, because when HTML 5 comes along, you'll actually define <header>, <footer>, etc