Many people seem to over complicate things, and this is no exception with css. If you use the KISS theory, css is not only simple and fun, but cross-browser compatible!
I’m not talking about font or p attributes, or even fancy backgrounds… all that you can figure out on your own. I am talking about managing your blocks, stopping tables and controlling the flow of your information. This is designing with CSS!
The secrets are “position: relative;”, “float: left;”, “width:300px;”, “overflow: hidden;” when applied to a div or a span tag.
position: relative;
This means that the div will positioned relative to it’s place in a code, like an inline image. This is more of a ‘required’ property that you set to relative, then worry about the other properties. You need this for the float to work. I do not like using position: absolute; because it seems to have problems with rendering the exact same on other browsers.
float: left;
This property is similar to the align property, and you can use left or right. Left is easier for me to manage. Everything after this will align to the left of this block as if it were an image. You can stop this from happening by using a br tag like so: <br clear=”left” /> . The clear property can be left, right or all.
width: 300px and overflow: hidden;
Even setting max-width properties can cause div’s and span’s to still exceed their maximums on certain browsers. Setting oveverflow to hidden means that any content inside the div that is over 300px wide will not be displayed. It’s as if it doesn’t exist. This is very useful when making sure boxes stay a certain size. This can be used with width or height, or both.