CODEWITHSUNDEEP
javascriptjquerycss
johnk1
johnk1

Reputation: 247

Auto set height of a div

I am displaying a grid of divs and the content of the each div may vary based on user's action. Once a new content is added to the div, the updated div is overlapping with the below div.

I tried using Freewall jquery plugin but somehow I was not able to set the height dynamically.

Refer below link for the sample code: http://jsfiddle.net/Pj6e6/

HTML

<div id="holder">
    <div id="one" class="item">Item 1</div>
    <div id="two" class="item">Item 2</div>
    <div id="three" class="item">Item 3</div>
    <div id="four" class="item">Item 4</div>
    <div id="five" class="item">Item 5</div>
</div>

<div id="clearer"></div>

<br/>
<br/>

<input type="button" value="Add to Item 1" id="add_one" />
<input type="button" value="Add to Item 2" id="add_two" />
<input type="button" value="Add to Item 3" id="add_three" />

CSS

/* The width of container DIV */
#holder {
    width:400px;
}
/* Style for each floated item */
.item {
    /* Give the distance for floated items */
    margin:2px 2px 2px 2px;
    float:left;
    /* Width and height for each item */
    width:100px;
    height:100px;
    /* Text align and background color */
    text-align:center;
    background-color:#cdc;
}
/* Clear the "float" style */
#clearer {
    clear:both;
}

jQuery

$("#add_one").click(function () {
    $("#one").html('Item 1<br/ >Item 1<br/ >Item 1<br/ >Item 1<br/ >Item 1<br/ >Item 1<br/ >Item 1<br/ >Item 1<br/ >Item 1<br/ >Item 1<br/ >Item 1<br/ >Item 1<br/ >Item 1<br/ >');
});

$("#add_two").click(function () {
    $("#two").html('Item 2<br/ >Item 2<br/ >Item 2<br/ >Item 2<br/ >Item 2<br/ >Item 2<br/ >Item 2<br/ >Item 2<br/ >Item 2<br/ >Item 2<br/ >Item 2<br/ >Item 2<br/ >Item 2<br/ >');
});

$("#add_three").click(function () {
    $("#three").html('Item 3<br/ >Item 3<br/ >Item 3<br/ >Item 3<br/ >Item 3<br/ >Item 3<br/ >Item 3<br/ >Item 3<br/ >Item 3<br/ >Item 3<br/ >Item 3<br/ >Item 3<br/ >Item 3<br/ >');
});

John

Upvotes: 1

Views: 807

Answers (1)

alexP
alexP

Reputation: 3765

You could use columns. JSfiddle

HTML

<div class="column">
    <div id="one" class="item">Item 1</div>
    <div id="two" class="item">Item 2</div>
</div>

<div class="column">
    <div id="three" class="item">Item 3</div>
     <div id="four" class="item">Item 4</div>
</div>

<div class="column">
    <div id="five" class="item">Item 5</div>
</div>

CSS

.column {
    float: left;
    width: 104px;
    height: 204px;
}

 .item {
    margin:2px 2px 2px 2px;
    width:100px;
    min-height: 100px;
    text-align:center;
    background-color:#cdc;
}

 #clearer {
    clear:both;
}

Upvotes: 1

Related Questions