I am a beginning webmaster and need some help now! I am looking for any proposals or examples on how to perform a valid 3 column layout effectively using blocks!

You would do this by using CSS and div tags. This is a very simple layout that will definitely require tweaking on your part b/c I haven't even tested it yet, but this will get you started.

.left-column {
position: relative;
float: left;
}

.center-column {
position: relative;
float: center;
}

.right-column {
position: relative;
float: right;
}


<div class="left-column">
</div>
<div class="center-column">
</div>
<div class="right-column">
</div>

there's some here
http://blog.html.it/layoutgala/

All that positioning is NOT necessary.

You might want to look over the many layouts here:
http://css-discuss.incutio.com/?page=ThreeColumnLayouts

Originally Posted by pingeyeg

You would do this by using CSS and div tags. This is a very simple layout that will definitely require tweaking on your part b/c I haven't even tested it yet, but this will get you started.

.left-column {
position: relative;
float: left;
}

.center-column {
position: relative;
float: center;
}

.right-column {
position: relative;
float: right;
}


<div class="left-column">
</div>
<div class="center-column">
</div>
<div class="right-column">
</div>

I would do this same thing but then put a big container around all of it and clear them.

.container{
clear:both;
}

.left-column {
position: relative;
float: left;
}

.center-column {
position: relative;
float: center;
}

.right-column {
position: relative;
float: right;
}

<div class="container"
<div class="left-column">
</div>
<div class="center-column">
</div>
<div class="right-column">
</div>
</div>

That should work and you'll be happy you put a container as you get into it.

The clear:both on #container is pointless and unnecessary - and it clears NOTHING. Using overflow there would be more to the point for clearing floats inside it.

Once again, position:relative on all 3 columns is NOT necessary.

Well then LadynRed, what would you do since you seem to have the solution, but have not said what it is yet?

Well, LadynRed, to be quite honest, I don't like the method you chose from that website. It seems to be more work than is actually needed. It appears there are about 3 wrappers before you actually get to the columns. Maybe I'm wrong, but it seems my way it a little bit easier and I have been using this method for quite some time now to work cross browser.

The link I posted led to a list of MANY 3-column solutions, I did not CHOOSE anything . The overuse of positioning causes many problems when it is frankly not necessary.

In addition, there is no property of float: center ! Float all the columns in one direction (left of right), or float 2 and leave one unfloated, depending on your needs. "Wrapping" the 3 column inside another div is almost always a good idea for many reasons.

Originally Posted by pingeyeg

.center-column {
position: relative;
float: center;
}

What is float: center supposed to do?

The best 3 column layout I found was at: http://matthewjamestaylor.com/blog/u...ail-pixels.htm

It has the advantages that it's fluid, no fixed height and allows for a header and footer. I've based a lot of my sites around this template.