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;
}<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="row-Item">
<div class="left-column">
<div class="left-column-padding">
<div class="warpper">
<div class="text-container">
Some Title Here<br>
May be multi-line
</div>
<div class="img-container">
<img src= "http://static.jsbin.com/images/jsbin_static.png">
</div>
</div>
</div>
</div>
<div class="right-column">
<div class="right-column-padding">
Content text go heres. Content text go heres. Content text go heres. Content text go heres. Content text go heres. Content text go heres.
<ul>
<li>some list item..</li>
<li>some list item..</li>
<li>some list item..</li>
<li>some list item..</li>
</ul>
Content text go heres. Content text go heres. Content text go heres.Content text go heres. Content text go heres. Content text go heres.Content text go heres. Content text go heres. Content text go heres.Content text go heres. Content text go heres. Content text go heres. Content text go heres. Content text go heres. Content text go heres.
</div>
</div>
</body>
</html>
