horizontal alignment of 3 divs on the same line

Question

I'm trying to get 3 divs to appear on the same line in the formation: left - centered - right

For example, one div left-aligned, the next one centered, and the last one right-aligned.

Does anyone know how to do this? I have 2 div left and right aligned, but if I introduce a centered div in the middle it moves the rightmost div onto a new line.

Answer 1

.left-col {
    float: left;
    width:25%;
}
.center-col {
    float: left;
    width: 50%;
}
.right-col {
    float: left;
    width: 25%;
}

<div class="left-col">purple</div>
<div class="center-col">monkey</div>
<div class="right-col">dishwasher</div>