How align three elements in single line with css?

[gintare]

I would like the page with three columns: left-adv, container, right-adv. But right-adv goes below container. DO not know how to keep it on the same line to the right.

I have tried clear and float. Could you please tell how to achieve this.

#page-container{
    width: 60%;
    background: red;
}
#left-adv{
    width: 10%;
    background: blue;
    float: left;
}
#right-adv{
    width: 10%;
    background: blue;
    float: right;
}

<div id="left-adv"> Left advertisement </div><!--left-adv -->        
 
<div id="page-container"> page container </div> <!--page-container -->  
 
<div id="right-adv">  Right advertisement </div><!--right-adv -->

[gintare]

Found the answer. All three elements must float:

    #page-container{
        width: 60%;
        background: red;
        float: left;
    }
    #left-adv{
        width: 10%;
        background: blue;
        float: left;
    }
    #right-adv{
        width: 10%;
        background: blue;
        float: left;
    }