Question

soooo i can’t seem to get some div alignments to work. basically, i have a container div, and i want a left column and a right column inside the div, and basically the right column is always going to be vertically greater than the left column. so i want the left column to vertically center next to the right column. here is my css:

.recipe_container{
    float:center;
    width:800px;
    position:relative;
    padding:0px;
    border:5px solid #B22222;
    margin:0px auto;
}
.recipe_container_left{
    float:left;
    width:390px;
    position:relative;
    top:50%;
    padding:4px;
    border-right:1px solid;
    margin:0px auto;
}
.recipe_container_right{
    float:right;
    width:390px;
    position:relative;
    padding:4px;
    border-right:1px solid;
    margin:0px auto;
 }

and the html is nestled like so

<div class="recipe_container">
    <div class="recipe_container_left">
         recipe title and ingredients
    </div>
    <div class="recipe_container_right">
         recipe cooking instructions
    </div>
 </div>

but the left “recipe_container_left” div doesn’t vertically center inside the parent “recipe_container” div. I’ve been googling for a little while and can’t seem to get anything to work. i know, newbie problem. any help?

like this is what i want as a result (that dynamically scales to the browser window some):

------------------------------------------------------------
recipe_container             ============================
                             |                          |
                             |  recipe_container_right  |
 =========================== |  recipe cooking-         | 
 | recipe_container_left   | |  -instructions           |                   
 | recipe title+ingredients| |                          |
 |                         | |                          |
 =========================== |                          |
                             |                          |
                             |                          | 
                             ============================
------------------------------------------------------------
(repeat)

Answer 1

best way to do this is use javascript to align the left div or if you really want to use css you can try

<div class="recipe_container_left">
   <div class="left_inner"></div>
</div>

.recipe_container_left{
   position:relative;
   top: 50%;
}
.left_inner{
   position:relative;
   top: -50%;
}

edit: this approach will need to set a height in order for the top position to work.
Try this table approach, works better without setting any fix height.

<div class="recipe_container">
    <div class="recipe_container_left">
        recipe title and ingredients
     </div>

    <div class="recipe_container_right">
       recipe cooking instructions
       recipe cooking instructions
       recipe cooking instructions
       recipe cooking instructions
       recipe cooking instructions
       recipe cooking instructions
       recipe cooking instructions
       recipe cooking instructions
       recipe cooking instructions
       recipe cooking instructions
       recipe cooking instructions
   </div>
</div>

​​​​​​​​​​​​​​​​​

.recipe_container{
display: table;
}
.recipe_container_left{
display: table-cell;
vertical-align: middle;
width: 300px;
}
.recipe_container_right{
width: 400px;
}

jsfiddle to see it in action ​