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
Please see the below fiddle link:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.