Translucent DIVs

This focuses on the background of div being a transparent color because it will be overlapping a background image on the body.

Both background and text will be transparent if you don't use positioning or a transparent png for background image.

Start with high contrast between text and background colors to prevent visability issues. Both background and text will be transparent but it should still look good if your transparency is not too low and you choose colors that have a high contrast.

div.transparentDIV
{
background-color: #000000; /* dark background*/
filter: alpha(opacity=70); /* 70 percent opacity */
-moz-opacity: 0.7;
opacity: 0.7;
}

div.transparentDIV *
{
filter: alpha(opacity=100); /* everything in the div to have an opacity at 100 percent */
-moz-opacity: 1;
opacity: 1;
color: #FFFFFF; /* white text */
}

Resources:
CSS Transparency for Internet Explorer (IE), Mozilla and Safari
Background transparency in CSS

Centering DIV with CSS

Liquid:
.container{margin-left: 10%; margin-right: 10%;}

Fixed (including ie4-6):
body{text-align: center;min-width: 750px;}
.container{margin-left: auto; margin-right: auto;width: 750px;text-align: left;}

Resources:
CSS Centering - fun for all!
Centering a Div

2 columns in CSS

The Basic Layout Classes

The DOCTYPE has to be correct for this to work.

.contentContainer {
margin:0 auto;
width:800px;
}
.contentL {
float:left;
width:400px;
}
.contentR {
float:right;
width:400px;
}

The widths are very sensitive properties

content L width + content R width must be < = "contentContainer". Any padding or margin applied will disrupt their side-by-side balance so be careful.

Let Me Clear My Float

You will need to "push down" the div that follows the "contentContainer" div with this CSS property:

.following-div {
clear:both;
}

Backgrounds can cause trouble too

If you run into problems with background colors/images not showing up (in Firefox) of your "contentContainer" div, you can add one of these classes:

.contentContainer {
float: left;
}

or


.floatfix {
clear: both;
}

insert < br class="floatfix" > before the "contentContainer" 's closing div tag

Anatomy of the Layout

¿ Porque Container? Because

Resources

Simple 2 column CSS layout
Webmaster World Forum

Further Research

http://www.glish.com/css/9.asp

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

http://www.neuroticweb.com/recursos/2-columns-layout/

http://css-discuss.incutio.com/?page=TwoColumnLayouts

http://realworldstyle.com/2col.html

http://wellstyled.com/css-2col-fluid-layout.html

http://www.bigbaer.com/css_tutorials/two-column-header-footer.htm

http://www.maxdesign.com.au/presentation/page_layouts/

--- http://css.maxdesign.com.au/floatutorial/tutorial0809.htm

center img

W3C SAMPLE :
img class="centeredPIC"
IMG.centeredPIC { display: block; margin-left: auto; margin-right: auto }



FINAL:

#flkr-cntrPIC{ display: block; margin-left: auto; margin-right: auto; float: center; padding: 5px; margin-bottom: 8px; border: 1px solid #ccc;}






References:
Web Publishing Secrets - Zeldman [written 10 days before 9/11]
Centering Images is harder than you think [2004/09]
W3C section on centering [lu 2007/01/15]