Html Divs, How To Wrap Content?

August 21, 2024 Post a Comment

I have 3 div's like on this image: div1 has fixed width but variable height, so what I would like is that if div1 height is bigger that the div2 height, the div3 stays under div2

Solution 1:

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

HTML

<divclass="main"><divclass="div1"></div><!-- Change height to see result --><divclass="div2"></div><divclass="div3"></div></div>

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

Solution 2:

As CSS doesn't provide anything for that job yet, you will have to use Javascript.

I would firstly create a page like on your first picture. Then I would use

$("#div").height()

, which returns the height of your div and compare this to your second div's height:

if($("#div1").height() > $("div2").height())
  //change website...

In the if body put the required css changes... That should do the trick.

Solution 3:

If you style the #content like this it works.

#content {
    background: #fbb;
    padding: 10px;
}

Notice there is no float.

jsFiddle: http://jsfiddle.net/JRbFy/1/

jsFiddle with equal height left-column and content effect: http://jsfiddle.net/JRbFy/2/

Solution 4:

If i understood properly you want something like this?

<style>#container1
    {
        width: 100%;
    }

    #left
    {
        width: 30%;
        background: #123456;
        float: left;
        height: 50%;
    }
    #right
    {
        width: 70%;
        float: left;
        height: 50%;
    }
    #right_top
    {
        background: #111111;
        height: 30%;
    }
    #right_bottom
    {
        background: #777777;
        height: 70%;
    }
</style><divid="container1"><divid="left">Div 1</div><divid="right"><divid="right_top">Div 2</div><divid="right_bottom">Div 3</div></div></div>

Solution 5:

This should work for you, at least pointing you in the right direction.

CSS:

.box {border:1px dashed black;}
#content {width:1000px;}
#clear {clear:both;}

#left {float:left; width:200px; height:100px; margin-right:15px;}
#top {float:left; width:780px; height:200px;}
#main {float:left; min-width:780px; max-width:1000px;}

HTML:

<html><head><linkrel="stylesheet"href="style.css" /></head><body><divclass="box"id="content"><divclass="box"id="left">Left</div><divclass="box"id="top">Top</div><divclass="box"id="main">Main</div><divid="clear"></div></div></body></html>

Html5 Development