How align three elements in single line with css?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • gintare
    New Member
    • Mar 2007
    • 103

    How align three elements in single line with css?

    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.

    Code:
    #page-container{
    	width: 60%;
    	background: red;
    }
    #left-adv{
    	width: 10%;
    	background: blue;
    	float: left;
    }
    #right-adv{
    	width: 10%;
    	background: blue;
    	float: right;
    }
    Code:
    <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
    New Member
    • Mar 2007
    • 103

    #2
    Found the answer. All three elements must float:



    Code:
        #page-container{
            width: 60%;
            background: red;
            float: left;
        }
        #left-adv{
            width: 10%;
            background: blue;
            float: left;
        }
        #right-adv{
            width: 10%;
            background: blue;
            float: left;
        }
    Last edited by Rabbit; Aug 18 '14, 04:37 AM. Reason: Please use [code] and [/code] tags when posting code or formatted data.

    Comment

    Working...