2 divs in horizontal space - html

Question

I have the following setup:
<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 want when div img gets hidden (display:none) that div msg gets 100% width of the parent. Butt he text needs to stay centered.
http://jsfiddle.net/ELKQg/801/

Answer 1

Display:table; is a good idea but those rule should be dispatch to main container and its two childs in order to be efficient with your goal.
Hover the demo to hide #img and see #msg filling whole width of #container:
DEMO
#container {
display:table;
width:182px;
height:60px;
}
#msg {
width:95px;
display: table-cell;
vertical-align: middle;
background:#666;
text-align: center;
}
#msg p {
font-size:13px;
color:#eee;
}
#img {
width:87px;
vertical-align:middle;
display: table-cell;
background:#333;
}
#container:hover #img {
display:none;
}
#content {
width:80px;
height:45px;
background:#ccc;
}

Answer 2

I guess a change in the message width might do the job:
$("#msg").on('click', function(){
$("#img").css('display', 'none');
$("#msg").css('width', '100%');
});

Answer 3

Hi this is possible with jquery.I have added the script that will solve this issue.
For testing i have added display:none; in #img id.
<style type="text/css" >
#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;
display:none;
}
#content{
position:absolute;
top:7px;
width:80px;
height:45px;
background:#ccc;
}
.w100{
width:100% !important;
}
</style>
<div id="container">
<div id="msg"><p>Lorem ipsum dolor sit amet.</p></div>
<div id="img"><div id="content"></div></div>
</div>
<script language="javascript" >
if ($('#img').css('display') == 'none') {
$( "#msg" ).addClass( "w100" );
}
</script>

Answer 4

Here is another solution that will work without jquery but you need to change the structure.
<style type="text/css" >
#container{
position:absolute;
width:182px;
height:60px;
}
#msg{
width:100%;
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;
display:none;
}
#content{
position:absolute;
top:7px;
width:80px;
height:45px;
background:#ccc;
}
</style>
<div id="container">
<div id="msg">
<p>Lorem ipsum dolor sit amet.</p>
<div id="img"><div id="content"></div></div>
</div>
</div>