Question

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.

Answer 1

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.