I have 2 horizontal divs next to each. I all trying to get the div on the right to shrink down as the window is made made smaller but it drops to the next line. Also I want the div on the right to reach the outer border of its container div.
The only success i have is if a put a percentage width on the right div but then it does touch the container border.
Here is the code
HTML
<div id="container">
<div id="rsfeed">
<div class="rsfeedlabel">RSS Stream</div>
<div class="rsfeedinfo ofh">
<table class="rsfeedtbl">
<tr>
<td>otam rem aperiam, eaque ipsa quae ab - Illo inventore veritatis et quasi rem aperiam, eaque ipsa inventore veritatis et quasi rem </td>
</tr>
</table>
</div>
</div>
</div>
CSS
#container {
width: 90%;
border:1px solid black;
height:100px;
}
#rsfeed {font-family: Arial;position: relative;overflow: hidden;}
#rsfeed .rsfeedlabel {
float: left;
border: 1px solid #727272;
height: 24px;
line-height: 24px;
background: grey;
margin-top: 20px;
color: white;
font-family: Arial;
vertical-align: middle;
padding-left: 6px;
padding-right: 6px;
font-size: 75%;
text-shadow: 1px 1px 1px #000;
}
#rsfeed .rsfeedinfo {
float: left;
height: 24px;
line-height: 24px;
border-right: 1px solid #b9b8b8; border-top: 1px solid #b9b8b8; border-bottom: 1px solid #b9b8b8;
margin-top: 20px;
font-size: 75%;
vertical-align: middle;
font-family: Arial;
white-space: nowrap;
overflow: hidden;
/*width:80%;*/
}
Hey now remove
float leftof this classand
add white-space nowrapin your id#rsfeedAs like this
Live demo
http://jsfiddle.net/MdJBP/4/