How to set height auto css div follow data? - css

Question

.....................................................................................................................................................................
i want to set height auto of div follow data , how can i set ?
.....................................................................................................................................................................
<div style="
width: 100%;
">
<div style="
margin: 0;
padding: 0;
height: 48px;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
background: #f5f5f5;
border-bottom: 1px #ccc solid;
width: 100%;
-webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,0.15);
-moz-box-shadow: 0 0 3px 1px rgba(0,0,0,0.15);
box-shadow: 0 0 3px 1px rgba(0,0,0,0.15);
display: block;
">
<div style="
margin: 0 auto;
width: 992px;
height: 48px;
">
<div style="
margin-top: 0px;
height: 48px;
text-align: center;
float: left;
width: 100%;
line-height: 48px;
">
<div style="
margin-top: 0px;
height: 48px;
text-align: center;
float: left;
line-height: 48px;
width: 50%;
">
kkkkkkkk
<br>
kkkkkkkk
<br>
kkkkkkkk
<br>
kkkkkkkk
</div>
<div style="
margin-top: 0px;
text-align: center;
float: right;
line-height: 48px;
width: 50%;
">
kkkkkkkk
</div>
</div>
</div>
</div>
</div>

Answer 1

I think I know what you want. Not 100% sure as you have not made much sense.
I started by making a id for each of your div because having that much inline styling is just silly.
HTML:
<div style="width: 100%;">
<div id="innerdiv">
<div id="innerdiv2">
<div id="innerdiv3">
<div id="innerdiv4">Testing
<br />Test info
<br />Test info
<br />Test info</div>
<div id="innerdiv5">Testing</div>
</div>
</div>
</div>
</div>
CSS:
#innerdiv {
margin: 0;
padding: 0;
height: auto;
overflow: hidden;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
background: #f5f5f5;
border-bottom: 1px #ccc solid;
width: 100%;
-webkit-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.15);
display: block;
}
#innerdiv2 {
margin: 0 auto;
width: 992px;
height: auto;
}
#innerdiv3 {
margin-top: 0px;
height: auto;
text-align: center;
float: left;
width: 100%;
line-height: 48px;
}
#innerdiv4 {
margin-top: 0px;
height: auto;
text-align: center;
float: left;
line-height: 48px;
width: 50%;
}
#innerdiv5 {
margin-top: 0px;
text-align: center;
float: right;
line-height: 48px;
width: 50%;
}
Now what you are looking for (I think) is overflow: hidden; You are floating the inner divs so there height wasn't being counted in the parent div. Adding the overflow to #innerdiv solves this problem.
DEMO HERE