I had two child div within a parent div with different heights and I wanted to align them at middle of the parent div. I used float:right on both of them and removed clear:both. Then I used margin property of the less tall element to align them at verticle middle.
The next problem was to expand the parent element when these elements float out of their container, this was achived using display:table; attribute on the parent div css
Final html looks like
and here is the css
The next problem was to expand the parent element when these elements float out of their container, this was achived using display:table; attribute on the parent div css
Final html looks like
<div class="topbar">
<div
class="rightelement"></div>
<div
class="leftelement">
</div>
</div>
and here is the css
.topbar
{
width: 100%;
background-color:black;
height:29px;
display:table;
}
.leftelement {
float: right;
margin:0px;
text-align: right;
width:auto;
background-color:transparent;
margin-top:7px;
}
.rightelement {
float: right;
margin:0px;
text-align: right;
width:auto;
background-color:transparent;
}