Question

I am planning a fluid-design based layout with 2 cols as follows;

Below is the HTML code:

<div id="container">
    <div class="fl wd5percent"><img src="titleText.jpg" /></div>
    <div class="fl wd95percent"></div>
</div>

Here the 1st col contains the image for title text and remaining width is used for other content.

Now my issue is as this is a fluid layout, I cannot use “px” width anywhere… I define img to use max-width:100%, but that kind of creates blank space (or gap) below the titleText image when the 2nd col height is more.

How do I define my CSS such that the page scales well as the browser is resized. By that, I mean whatever be the browser size, the titleText image would be displayed to occupy full height as the content height of 2nd col..

Again, I cannot use px width or height anywehere in my CSS. So I cannot say, width:200px;height:100px

Answer 1

Please see the below fiddle link:

http://jsfiddle.net/thilakar/xKrws/2/