Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Liquid height div

Liquid height div

Problem

I've got a problem in my CSS layout where, I have a Container which includes two columns. The CSS for the two columns are displayed below.

 #project-desc{
    float: left;
    width: 500px; 
}

#project-images{
    float: right;
    width: 300px; 
}

I've to float them since I don't know a way to make the two columns stick in left and right.

the problem is, according to the content in the project-desc it automatically adjusts its Height. but, the container doesn't adjust the height of it accordingly, making the content drift away from the actual container. The container code is given below.

#project-space{
    margin: 10px auto;
    padding: 5px; 
    width: 800px;
    height: 100%;
    min-height: 250px;

    background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#fff), to(#fff), color-stop(.2, #f2f2f2));
border: 1px solid #ccc;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

What I want is to make the container adjust its height accordingly to the content height inside of it. I tried with removing the floating option from project-desc and it worked. but when I add something to the project-images, it's positioned ontop of the projects-desc.

How can I fix this issue.

Problem courtesy of: Imesh Chandrasiri

Solution

The 'clearfix' trick is commonly applied to the container in order to achieve the behaviour you desire. Google will find you an implementation of this very quickly, plus some form of explanation.

Alternatively you may float the container itself left or right.

Solution courtesy of: jstephenson

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Liquid height div

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×