5

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)
jonc
  • 119
  • 1
  • 2
  • 8

3 Answers3

2

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 ​

killebytes
  • 940
  • 1
  • 10
  • 24
  • so what would the best way to do this be? like i feel like there should be a simple css solution... it's basic alignment shit. but if you think a js is the way to go, how would i do it? thank you for you efforts mang. – jonc Jun 04 '12 at 07:11
  • like the .left_inner part makes me feel like i'd rather do it through js, simply because i wanna stick to the do-not-repeat-yourself method. – jonc Jun 04 '12 at 07:13
  • 1
    set the margin-top of "recipe_container_left". (right-div-height / 2) - (left-div-height/2) – killebytes Jun 04 '12 at 07:15
  • could you restate that in a new answer response? i wanna see how you format your css for this issue. (yeah sounds like i'm retarded; i'm not. just hook me up with an answer if you really have one). – jonc Jun 04 '12 at 07:29
  • although this still isn't working for me... but the jsfiddle obviously prooves it. it must be somethign with one of my parent divs that is messing it up., or one of my other div properties that i shouldn't have. thanks so much. – jonc Jun 04 '12 at 19:16
2

top statements only work with absolute, fixed or relative positioned elements. Oh and there is no flaot: center

Vertically aligning in CSS can be a little messy you should read: Vertically centering a div inside another div

Community
  • 1
  • 1
meo
  • 30,872
  • 17
  • 87
  • 123
  • 1
    sooo wtf does .recipe_container_left have a top:50% and the element has a "relative" position? i juuuust wannna figure thiiiis shiiit ouuuuut....!!!!! – jonc Jun 04 '12 at 07:24
0

Try to simply add height property to recipe_container.

Botz3000
  • 39,020
  • 8
  • 103
  • 127
IgnasK
  • 384
  • 2
  • 19
  • how do i do that so that it is dynamic to the recipe_container content height? i'm developing templates through django, so the content needs to be dynamic, i can't always put "height:100px", because the content changes constantly. also, i tried variations on "height:(whatever like 100 or 50 or whatever)%", and the child div "recipe_container_left" still didn't vertically center. There is a parent div to "recipe_container", could it have to do with that parent? – jonc Jun 04 '12 at 06:32
  • What if you add min-height in pixels/em? I can't assume anything about parent div, unless you post it's properties here. If I'm not mistaken, in order to get top:50% working, you need to specify either height or min-height property. – IgnasK Jun 04 '12 at 06:49
  • i'll give the min-height thing a try. i'll get back to you. thanks again. – jonc Jun 04 '12 at 06:59