Vertical-align in Nested Column

Question 1

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>

Example

Live

Question 2

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 <!DOCTYPE html>

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

<img src= "http://static.jsbin.com/images/jsbin_static.png" alt="image description">

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.

user34073user34073 · Answer 1 · 2015-04-25 05:18:15Z

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 <!DOCTYPE html>

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

<img src= "http://static.jsbin.com/images/jsbin_static.png" alt="image description">

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.

Stack Exchange Network

Vertical-align in Nested Column

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

Vertical-align in Nested Column

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related

Hot Network Questions