5
\$\begingroup\$

Requirements:

  1. There are two columns. The left column is fixed width.
  2. The height of two Column should be the same.
  3. 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)
  4. Right column contains rich text content.
  5. If the height of left column is higher than right column, content of right should remain vertical center.
  6. 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

| improve this question | |
\$\endgroup\$
5
\$\begingroup\$

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.

| improve this answer | |
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.