Here are sample divisions:
#grandparent {
width: 100px;
}
#parent {
overflow: auto;
height: 100px;
}
.child {
overflow: hidden;
margin-left: 10px;
}<div id="grandparent">
<div id="parent">
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
</div>
</div>Here are sample divisions:
#grandparent {
width: 100px;
}
#parent {
overflow: auto;
height: 100px;
}
.child {
overflow: hidden;
margin-left: 10px;
}<div id="grandparent">
<div id="parent">
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
</div>
</div>The <div class="child"> width value is always 10 pixels less than <div id="parent"> width value. How can it be calculated so any width value is given to <div id="parent">, its child gets 10 pixels less than that?
Any help is very much appreciated!
Mike
Share Improve this question edited Jul 10, 2015 at 14:32 Kyle 1,5782 gold badges20 silver badges48 bronze badges asked Apr 29, 2011 at 15:13 MoriMori 6,83019 gold badges68 silver badges103 bronze badges 1- More clarification: For the overflow:hidden to work poperly cross browser, I need to add a width value, for example: .child {overflow:hidden; margin-left:10px; width:73px;}. But I'd like it to be calculated and added to its style dynamically. For example if I set <div id="parent"> width value to 83px, the child gets width:73px in its style automatically. – Mori Commented Apr 29, 2011 at 16:18
4 Answers
Reset to default 8With jQuery, this is very easy. Just subtract 10 from what.innerWidth() Here:
$(".child").css('width', $('#parent').innerWidth()-10);
You could also do it like this:
$(".child").each(function(){
$(this).css('width', $(this).parent().innerWidth()-10);
});
-Which means you could have more than one parent, without having to know the id.
Normal JS
You can use the clientWidth property of an HTML element object. Like this:
var targetParent = document.getElementById('parent'); // or whatever
var targets = targetParent.getElementsByClassName('child');
for(var i=0;i<targets.length;i++) targets[i].parentNode.style.width = targets[i].clientWidth - 10;
Hope this helps! - Tanner.
This can be done with calc
width: -webkit-calc(50% - 7px) !important;
width: -moz-calc(50% - 7px) !important;
width: calc(50% - 7px) !important;
More info and examples https://developer.mozilla/en-US/docs/Web/CSS/calc
Try this css for parent:
#parent {
overflow:auto; height:100px;
padding: 0 5px 0 5px;
}
That's what the selectors are for in CSS:
#parent.div {
width: 100%;
margin-left: 10px;
margin-right: 10px;
}