So, I have a
<div style="width:250px;border: 1px solid;overflow:auto" id="container">
<div style="float:left;">Vasileostrovsky rayon</div>
<div id="rightAlignedDiv"> Div which will be expanding </div>
</div>
How can I make the #rightAlignedDiv
to expand over the left one. In other words when the #rightAlignedDiv
is wide enough, I want it to push the left one to be smaller, and only the left div can move to a new line :).
Here is the fiddle to demonstrate the predicament http://jsfiddle.net/eC9ZX/1/
This has to be solved somehow using css. A JS solution will complicate the logic too much. And it wouldn't be an elegant one.
window.alterWidth = function() {
var testWidth=parseInt(document.getElementById("testId").style.width);
var testWidth1=parseInt(document.getElementById("rightDiv").style.width);
document.getElementById("testId").style.width = (testWidth-33)+'px';
document.getElementById("rightDiv").style.width = (testWidth1+33)+'px';
var newImg = $('#com_ibm_ioc_spb_kpi_StatusBox_412').clone();
$('#rightDiv').append(newImg);
}
Give id to both the div and make overflow auto for first div.
Also try this fiddle http://jsfiddle.net/L774V/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.