Greetings, I am facing an issue with a div container that adjusts its size based on the content of a child div inside. For example, if the child div contains three lines of text, the container will automatically increase in height.
In addition to the content div, there is another child div next to it. I want this second div to also change its height dynamically like the content div.
Here is a sample scenario:
Any assistance on this matter would be greatly appreciated.
Below you can find the HTML markup and CSS code:
<div class="announcement>
<div class="color-blind-warning"><img src="icon-alert.png"/></div>
<div class="content">
<div class="titleText">Testing testing testing</div>
<div class="expand"></div>
<div class="ms-clear" style="margin-bottom: 3px;"></div>
<div class="calendar-image"> </div>
<div class="title-date">25 dec, kl: 05:30</div>
<div class="ms-clear"></div>
</div>
</div>
CSS:
.color-blind-warning{
float: left;
width: 42px;
background-color: #e6433e;
height: auto;
}
.title {
background-position: 7px 7px;
padding: 5px 15px 5px 10px;
.expand {
display: inline-block;
vertical-align: middle;
background-image: url('ner.png');
background-repeat: no-repeat;
margin-top:5px;
margin-right: -6px;
width: 16px;
height: 16px;
padding:0;
float:right;
}
.titleText {
display: inline-block;
vertical-align: middle;
width: 220px;
font-size: 12px !important;
margin-bottom: -7px;
}
.title-date {
display: inline-block;
vertical-align: middle;
font-size: 11px !important;
margin-left: 5px;
float:left;
margin-bottom:5px;
}
.calendar-image
{
height:14px;
width:14px;
background-image: url('icon-importantmessages.png') !important;
float:left;
}