HTML divs, how to wrap content?

Question

I have 3 div\'s like on this image:

div1 has fixed width but variable hei

Answer 1

And finally my solution comes too :)

Demo: http://jsfiddle.net/JRbFy/3/

Just using margin: 10px auto; , and taking the content div out of the main_content div:

HTML

    

    {% block news %}{% endblock %}
        

        Hover on me to increase my height 
    
  
    

        

            {% block rightcol %}{% endblock %}
        
 
    
    

        

            

                {% block content %}{% endblock %}
            
        


    

    

CSS

.colcontainer{
    width: auto;
}

.col-left {
    background: none repeat scroll 0 0 silver;
    float:left;
    padding:0;
    margin:0;
    width: 300px;
    min-height:198px;
}

.col-left:hover{    
    height: 300px;
}

.col-right {
    background: none repeat scroll 0 0 steelblue;
    text-align:left;
    padding:0;
    margin:0 0 0 200px;
    height:198px;
}

#content {
    background: none repeat scroll 0 0 yellowgreen;    
    margin: 10px auto;
    padding: 10px;
}

Hope that helps