CODEWITHSUNDEEP
jqueryhtmlcss
Apolo
Apolo

Reputation: 4050

Jquery append and height property

I have a strange problem when I append content to a div with JQuery, the height of this div is not updated. I made a JSFiddle for you to see the problem (I tried to make it as simple as possible)

http://jsfiddle.net/hf66v/5/

HTML :

<div id="container">
    SomeContent
</div>

which become :

<div id="container">
    SomeContent
    <div class="dateDiv date1">
        <span class="dateTitle">Date2</span><br>09/10
    </div>
    <div class="dateDiv date2">
        <span class="dateTitle">Date2</span><br>10/12
    </div>
</div>

CSS :

div.dateDiv  {
    border: 1px solid black;
    width: auto;
    text-align: center;
    padding: 5px;
}

div.date1 {
    float: left;
}

div.date2 {
    float: right;
}

Content is added this way :

$("#container").append("<div class='dateDiv date1'><span class='dateTitle'>Date1</span><br>09/10</div>");
$("#container").append("<div class='dateDiv date2'><span class='dateTitle'>Date2</span><br>10/12</div>");

I did not found any answer about this. Is that because I set a "float" CSS property ? (I'm not used to it)

Any ideas ?

Upvotes: 2

Views: 2558

Answers (2)

reggaemahn
reggaemahn

Reputation: 6668

You need to clear the floats. Append a 'clearer' div after you append the two divs.

Modify your jQuery like this.

$("#container").append("<div class='dateDiv date1'><span class='dateTitle'>Date1</span><br>09/10</div>");
$("#container").append("<div class='dateDiv date2'><span class='dateTitle'>Date2</span><br>10/12</div>");
$("#container").append("<div class='clearer'></div>");

And add this to your CSS

.clearer{
    clear: both;
}

FIDDLE

Or if your html structure is not going to change, you ONLY need to add this to your css:

hr{    
    clear: both;
}

FIDDLE

Upvotes: 3

hsz
hsz

Reputation: 152286

You can set to the #container following style:

#container {
  overflow: hidden;
}

http://jsfiddle.net/hf66v/6/

Upvotes: 1

Related Questions