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

<div class="colcontainer">
    <div class="col-left">
    {% block news %}{% endblock %}
        <br/>
        <b>Hover on me to increase my height </b>
    </div>  
    <div id="main_content">
        <div class="col-right">
            {% block rightcol %}{% endblock %}
        </div> 
    </div>
    <div id="content">
        <div class="contentwrap">
            <div class="itemwrap">
                {% block content %}{% endblock %}
            </div>
        </div>


    <div class="content-bottom"><div class="content-bottom-left"></div></div>
    </div>
</div>

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

Answer 2

Seeing as everyone luuuuuuurves jQuery, I decided to throw something together that actually does what you asked. Have fun :)

<div id="div1">
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
</div>
<div id="div2">
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
</div>
<div id="div3">
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
</div>
<div id="div4">
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
</div>

Throw in some css

#div1, #div2, #div3, #div4 {
    border:3px double #000;
    background:#fff
}
#div1 {
    width:200px;
    float:left;
}
#div4 {
    clear:both;
}

And finally your jQuery.

$(function () {
    $('#div2').css({
        marginLeft: $('#div1').outerWidth()
    });
    if ($('#div2').height() < $('#div1').height()) {
        $('#div3').css({
            marginLeft: $('#div1').outerWidth()
        });
    }
});

Now. I am not advocating this method, just saying that it actually achieved what you asked for whereas nothing else here has ;)

See it at this jsFiddle. Simply add one more <p>Test</p> to div1 and you will see that div3 then goes to the right of div1 as per your image.

Now, I know someone will say "But div1 doesn't take all the height then!", well fear not. Check the updated jsFiddle with one added piece to the javascript to see your questions answered too. Just delete one of the <p>Test</p> from div1.

$(function () {
    $('#div2').css({
        marginLeft: $('#div1').outerWidth()
    });
    if ($('#div2').height() < $('#div1').height()) {
        $('#div3').css({
            marginLeft: $('#div1').outerWidth()
        });
        $('#div1').css({
            height: $('#div2').outerHeight() + $('#div3').height()
        });
    }
});

I have to reiterate that this solution relies on Javascript. Turn it off, device doesnt support it, this stops working.

Answer 3

Not necessarily answers the question, but I thought you might like to know that in CSS 3 you can use this style - {word-wrap: break-word;} - to fit a long string inside a div.

Answer 4

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/

Answer 5

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>

Answer 6

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.