I am currently working on developing a fluid layout, however I have encountered a minor issue with the height of the container. The outer <div> (highlighted in yellow, ip_A-1) is not adjusting its height according to its child elements.
You can view the code on this fiddle.
I attempted adding a spacer inside but it did not resolve the issue. Also, setting ip_BA_1 and ip_BB_1 to position:relative had no impact.
Here is the HTML code:
<div class="ip_A_1">
<div class="ip_BA_1">Hello I am a label that needs to wrap</div>
<div class="ip_BB_1">
<div class="ip_BBA_1">Hello I am text that needs to wrap.
Hello I am text that needs to wrap.
Hello I am text that needs to wrap.</div>
</div>
<div class="spacer_0"></div>
</div>
<div class="spacer_0"></div>
<div class="ip_A_1">
<div class="ip_BA_1">Hello I am a label that needs to wrap</div>
<div class="ip_BB_1">
<div class="ip_BBA_1">Hello I am text that needs to wrap.
Hello I am text that needs to wrap.
Hello I am text that needs to wrap.</div>
</div>
<div class="spacer_0"></div>
</div>
The CSS code:
.spacer_0 {
clear:both;
width:100%;
height:0px;
}
.ip_A_1 {
position: relative;
width: 100%;
height: auto;
min-height: 28px;
text-align: left;
font-family:'Calibri', 'Gill Sans', 'Helvetica', sans-serif;
font-size:1em;
background: yellow;
}
.ip_BA_1 {
float: left;
width: auto;
padding: 4px 10px 20px 45px;
font-family:'Calibri', 'Gill Sans', 'Helvetica', sans-serif;
font-size: 0.88889em;
line-height: 0.88889em;
font-weight: bold;
background: blue;
color: white;
}
.ip_BB_1 {
clear: both;
float: left;
margin-top: -15px;
width: 100%;
}
.ip_BBA_1 {
position: absolute;
left: 30px;
right: 0px;
padding-left: 6px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #ccc;
border: 1px solid #666;
}