Вертикальные центральные divs внутри поплавков

Question

У меня есть две колонки в пределах .container div: они percentage ширины и плавающие left. Мне нужно, чтобы содержимое этих поплавков было вертикальным и горизонтально центрированным. Они являются динамическими высотами и могут меняться. Я хотел бы избежать jQuery. Кто-нибудь знает простой метод?

http://jsfiddle.net/LnMPC/2/

CSS:

.container { 
    width: 600px; 
    background-color: lightgrey; 
    overflow: auto; 
    height: 400px; 
} 
.col40 { 
    width: 40%; 
    height: 100%; 
    float: left; 
    background-color: green; 
} 
.col60 { 
    width: 60%; 
    float: left; 
    background-color: blue; 
    height: 100%; 
} 
p { 
    width: 13em; 
    background-color: salmon; 
} 

HTML:

<div class="container"> 
    <div class="col40"> 
     <p>40% -- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet illo ab temporibus consequuntur excepturi sint delectus laboriosam aspernatur quas tenetur corporis error consequatur tempore eos minus asperiores voluptatum alias quibusdam!</p> 
    </div> 
    <div class="col60"> 
     <p>60% -- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus vel dolorum. Quos atque deleniti fuga quo consequuntur molestias beatae voluptates magni architecto ducimus inventore exercitationem voluptatum nostrum. Labore culpa modi.</p> 
    </div> 
</div> 

Answer 1

display:table это новая тенденция, чтобы избежать float с, как вам нужно clear их позже :)

working demo

CSS

html, body { 
    width: 100%; 
    height: 100%; 
    margin:0; 
    padding:0; 
} 
.container { 
    width: 600px; 
    background-color: lightgrey; 
    overflow: auto; 
    height: 400px; /* or "100%" if container needs to be full-height*/ 
    display:table;  /* added*/ 
} 
.col40 { 
    width: 40%; 
    height: 100%; 
    background-color: green; 
    display:table-cell;  /* added*/ 
    vertical-align:middle;  /* added*/ 
} 
.col60 { 
    width: 60%; 
    background-color: blue; 
    height: 100%; 
    display:table-cell;  /* added*/ 
    vertical-align:middle;  /* added*/ 
} 
p { 
    width: 13em; 
    margin:0 auto; /* added to center the content*/ 
    text-align:center;  /* added - optional */ 
    background-color: salmon; 
} 

Answer 2

CSS

.container{ 
display:table; 
} 
.col40,.col60{ 
display:table-cell; 
vertical-align:middle; 
} 
.col40{ 
width:40%; 
} 
.col60{ 
width:60%; 
} 

Если вы хотите по горизонтали центра, они уже в общей сложности 100% (40 + 60), поэтому я не совсем уверен, что вы ищете здесь.

Answer 3

Попробуйте это:

http://jsfiddle.net/LnMPC/5/

Я думаю, это то, что вы хотите, верно?

p { 
    width: 13em; 
    background-color: salmon; 
    margin: 0 auto; 
    margin-top: 100px; 
}