The current structure I am working with looks like this:
<div id="container">
<div id="msg"><p>Lorem ipsum dolor sit amet.</p></div>
<div id="img"><div id="content"></div></div>
</div>
#container{
position:absolute;
width:182px;
height:60px;
}
#msg{
width:95px;
height:60px;
float:left;
display: table;
background:#666;
}
#msg p{
font-size:13px;
color:#eee;
text-align: center;
vertical-align: middle;
display: table-cell;
}
#img{
width:87px;
height:60px;
float:right;
background:#333;
}
#content{
position:absolute;
top:7px;
width:80px;
height:45px;
background:#ccc;
}
I am aiming to achieve a layout where, when the div with the id "img" is hidden (using display:none), the div with the id "msg" expands to occupy 100% width of its parent element. However, the text within "msg" should remain centered.