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

Atlast, I got it :) Just wrap all those three elements in a parent element as shown below.

HTML

CSS

.main{width:200px;height:200px;border:1px solid black;overflow:hidden;}
.div1{width:100px;min-height:100px;float:left;background-color:green;}
.div2{width:100px;display:inline-block;height:100px;background-color:blue;}
.div3{width:100px;display:inline-block;height:100px;background-color:red;margin-top:-4px;}

Working fiddle

If you want to have the width of the third div to be wide from before itself then I highly recommend you to go with jQuery.

.div3{width:200px;}  /* Keeping width wide enough with the container */

---

jQuery

$(function(){
    if($('.div1').height() > 100)
       $('.div3').width(100)
});

Working Fiddle