I feel really stupid for asking this because it seems so basic but for some reason the height of my container div is not expanding to accommodate the divs within. I'm building a customized page on Tumblr with my contact details (note: not on the index/permalink page but a separate page) and I've used divs as a sort of makeshift table because html table tags don't seem to work on customized pages on Tumblr.
[The style attributes for the container div (id: Post) is inherited from the ones for the Permalink pages.]
All relevant CSS taken from 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 Contacts 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>
Oh and I made a fiddle thing here: http://jsfiddle.net/Yelrihs36/wkCQR/ So what exactly am I doing wrong? I feel like the answer is really easy and staring me right in the face and I'm going to kick myself when I find out what it is...
In this case I would recommend using a table. The div is being thrown off because of your float left statements.
The effect will be the same and it will be much easier to program and will be easier to understand if anyone else needs to see your code. I've spent many hours messing around with div, float, and display trying to make divs work like a table. I just don't think it's worth it sometimes.
I hope this helps.