Vertical-align in Nested Column

Requirements:

• There are two columns. The left column is fixed width.

• The height of two Column should be the same.

• Left column contain a title (can be multi-line) and an Image (limit max width to left column's width, but can be any height)

• Right column contains rich text content.

• If the height of left column is higher than right column, content of right should remain vertical center.

• If the height of right column is higher than left column, the Title should stay top and the Image should stay vertical center in the rest of the space.

Edit:

Oh, sorry. I found that I can't do 5 & 6 in the same time...
Is it possible make it work on IE 7 in pure CSS?



.row-Item{
border: 3px solid #F9BE00;
position: relative;
}

.left-column{
position: absolute;
width:200px;
background : #F9BE00;
top: 0;
left: 0;
bottom: 0;
}

.right-column{
margin-left:200px;
vertical-align: middle;
background: #FEF2CC;
}

.warpper{
display:table;
min-height: 100%;
}

.left-column .text-container{
display:table-row;
height:1px;
font-size:20px;
font-weight:bold;
}

.left-column .img-container{
display:table-row;
height:100%;
text-align:center;
}
`


JS Bin






Some Title Here

May be multi-line









Content text go heres. Content text go heres. Content text go heres. Content text go heres. Content text go heres. Content text go heres.

• some list item..

• some list item..

• some list item..

• some list item..

Content text go heres. Content text go heres. Content text go heres.

As Kid Diamond stated in a comment, your HTML has errors - 5 of them. You can validate it by running it through the W3C validator.

First off, you need a DOCTYPE so browsers know which version of HTML you are using - the latest is simply `

Second, img elements need alt attributes so screen readers, search engines, and other computer programs can make sense of them:

Finally, you forgot to close one of your divs - the div around the img` element.

Your CSS has no errors at the W3C CSS validator.

StackExchange Code Review Q#63120, answer score: 5