[SOLVED] 3 divs aligned

[M.O.S. Studios]

I want to have 3 <div>,

 

1 far left

1 centered

1 far right

 

all vertically aligned,

 

this is my code

 

html

<div class="main_wrapper" align='center'>
     <div class="left_bar">
	LEFT BAR
     </div>
     <div class="content">
	CONTENT
     </div>
     <div class="right_bar">
	RIGHT BAR
     </div> 
 </div>

 

css

.main_wrapper{
   position: relative;
   float: left;
   left: 0px;
   width: 1280px;
   margin-bottom: 20px;
   background-color: #cccccc
}

.left_bar{
   position: relative;
   float: left;
   left:10px;
   width: 100px;
   height: 406px;
   background-color: #828282
}

.content{
   position: relative;
   width: 406px;
   height: 406px;
   background-color: #828282
}

.right_bar{
   position: relative;
   float: right;
   right:10px;
   width: 100px;
   height: 406px;
   background-color: #828282
}

body {
   border-width: 0px;
   padding: 0px;
   margin: 0px;
   font-size: 90%;
   background-color: #e7e7de
}

 

don't know why but the far right column keeps going lower the the other two

 

any ideas??

 

thanks in advance

[lostprophetpunk]

Put the far right div above the others in the html.

[M.O.S. Studios]

AWESOME!!!

thanks!!!

Also, if you don't mind, can you explain why that worked?

[dropfaith]

http://css.maxdesign.com.au/floatutorial/