CODEWITHSUNDEEP
htmlcss
Milos Cuculovic
Milos Cuculovic

Reputation: 20223

HTML divs, how to wrap content?

I have 3 div's like on this image:

enter image description here

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 and on the right of the div1, like here:

enter image description here

Any idea on how to do this? For the moment, I have created a container:

<div class="colcontainer">
    <div class="col-left">
    {% block news %}{% endblock %}
    </div>  
    <div id="main_content">
        <div class="col-right">
            {% block rightcol %}{% endblock %}
        </div> 
        <div id="content">
            <div class="contentwrap">
                <div class="itemwrap">
                {% block content %}{% endblock %}
            </div>
        </div>
    </div>

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

My CSS is like this: 

.col-left {
    float:left;
    padding:0;
    margin:0;
    width: 300px;
    min-height:198px;
}

.col-right {
    text-align:left;
    padding:0;
    margin:0 0 0 200px;
}

#content {
    background: none repeat scroll 0 0 #FFFFFF;
    float: left;
    margin-top: 10px;
    padding: 10px;
    width: 980px;
}

Here is the JSFiddle demo

Upvotes: 16

Views: 105294

Answers (10)

05beckga
05beckga

Reputation: 95

I probably missed read the question but does this not have have the desired layout you wanted.

https://jsfiddle.net/94ohw4hq/

<div id="container">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
<div class="bottom">
Bottom
</div>
</div>

Upvotes: 0

Erik K.
Erik K.

Reputation: 1062

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.

Upvotes: 0

Muhammad Hassaan
Muhammad Hassaan

Reputation: 5

Use

wookmark plugin

to solve your problem

Upvotes: -3

Rafe
Rafe

Reputation: 793

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.

Upvotes: 0

Mr_Green
Mr_Green

Reputation: 41832

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

Upvotes: 6

Andrea Ligios
Andrea Ligios

Reputation: 50203

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

Upvotes: 2

James Coyle
James Coyle

Reputation: 10398

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/

Upvotes: 4

Nexcius
Nexcius

Reputation: 93

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>

Upvotes: 2

solusipse
solusipse

Reputation: 587

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>

Upvotes: 2

ltsstar
ltsstar

Reputation: 892

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.

Upvotes: 5

Related Questions