Having problems with div columns - html

Question

i want 3 columns with the same width.
i did succeed by use divs.
i made 2 divs in a div, then made another div in one of the two divs and then used css float left & right.
but was wondering if there was a different and better way? (no tables, i tried doing this without tables)
because i had trouble centering texts that were next to a image
and because i used float the white background disappears in the area where the columns were.
could someone help me either fix the problems i'm having or giving me a alternative method.

Answer 1

<div class="wrapper">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
.wrapper {
margin: 0 auto;
width: 450px;
}
.left {
float: left;
width: 150px;
background-color: red;
height:200px;
display:inline-block;
}
.middle {
background-color: yellow;
height:200px;
width: 150px;
display:inline-block;
}
.right {
float: right;
width: 150px;
background-color: blue;
height:200px;
display:inline-block;
}

Answer 2

I don't really get your question. But I make a solution. Here's my demo on Fiddle:
http://jsfiddle.net/asubanovsky/8d3m9/
HTML:
<div id='parent'>
<div id='first'>First</div>
<div id='second'>Second</div>
<div id='third'>Third</div>
</div>
CSS:
#parent{
width: 900px;
margin: 0 auto;
}
#first, #second, #third{
width: 300px;
float: left;
color: white;
text-align: center;
}
#first{
background-color: #222;
}
#second{
background-color: #444;
}
#third{
background-color: #666;
}