HTML Divs, How To Wrap Content?

March 27, 2023 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

<div class="main">
   <div class="div1"></div>  <!-- Change height to see result -->
   <div class="div2"></div>
   <div class="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>

<div id="container1">
    <div id="left">Div 1</div>
    <div id="right">
        <div id="right_top">Div 2</div>
        <div id="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>
<link rel="stylesheet" href="style.css" />
</head>
<body>

<div class="box" id="content">
<div class="box" id="left">Left</div>
<div class="box" id="top">Top</div>
<div class="box" id="main">Main</div>
<div id="clear"></div>
</div>

</body>
</html>

Html5 Manual