Why is my content overflowing from my container div?

I feel very stupid when I ask about it because it seems so basic, but for some reason the height of my div container does not expand to fit the div inside. I am building a custom page on Tumblr with my contact details (note: not on the index / permalink page, but on a separate page), and I used divs as a kind of temporary table, because html table tags do not seem to work on custom pages on tumblr.

[The style attributes for the div (id: Post) container are inherited from those specified for Permalink pages.]

All relevant CSS taken from the theme editor:

#cent{
background-color:#FFE5E5;
padding:5px;
position:static;
width:800px;
margin: 0px auto;
}

#post{
background-color:#fff;
border:10px ridge #ff0000;
float:none;
width:700px;
margin: 2px auto;
padding:10px;
}

.Division{
float: left;
width: 300px;
margin-left: 10px;
margin-bottom: 10px;
padding: 5px;
font-weight: bold;
}
.Division2{
float: left;
margin-left: 0px;
margin-bottom: 10px;
padding: 5px;
}

HTML on the Contact page:

<div id="cent">
<div id="post">
<div class="Division">Telephone Number:</div>
<div class="Division2">+6012-3456789</div>
<br/>
<div class="Division">E-Mail Address:</div>
<div class="Division2">sample@live.com.my</div>
<br/>
<div class="Division">Address:</div>
<div class="Division2">Line 1 <br />Line 2 <br />Line 3 <br />Line 4</div>
</div>
</div>

, - : http://jsfiddle.net/Yelrihs36/wkCQR/ ? , , , , .

+4
2

. Div - .

, , - . div, float display, div . , .

, .

+1

#post float: left

#cent{
background-color:#FFE5E5;
padding:5px;
position:static;
width:800px;
margin: 0px auto;
}

#post{
background-color:#fff;
border:10px ridge #ff0000;
float:left;
width:700px;
margin: 2px auto;
padding:10px;
}

.Division{
    float: left;
    width: 300px;
    margin-left: 10px;
    margin-bottom: 10px;
    padding: 5px;
    font-weight: bold;
}
.Division2{
    float: left;
    margin-left: 0px;
    margin-bottom: 10px;
    padding: 5px;
}

+1

All Articles