/    Sign up×
Community /Pin to ProfileBookmark

Dynamically calculate a div width

Copy linkTweet thisAlerts:
Apr 29.2011

Hi,

Here are sample divisions:

[CODE]<style type=”text/css”>
#grandparent {width:100px;}
#parent {overflow:auto; height:100px; }
.child {overflow:hidden; margin-left:10px;}
</style>

<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>[/CODE]

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

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@TcobbApr 29.2011 — You might try something like this:

[CODE]function setKids(parent_id){
var x, width, i, arr;
x = document.getElementById(parent_id);
width = x.offsetWidth - 10;
arr = x.childNodes;
for (i = 0; i < arr.length; i++){
if ((arr[i].nodeType != 1) || (arr[i].tagType != 'DIV')){ continue;}
arr[i].style.width = width + "px";
}
} [/CODE]

Mind you--if you wanted the child DIVs indented 10 px to the left of the left border of the parent this won't do that for you. Your request had some ambiguity to it.
Copy linkTweet thisAlerts:
@svidgenApr 29.2011 — Have you tried a CSS solution? Maybe something like this:

[code=html]<style type='text/css'>
.parent {
width: 500px;
padding: 0px;
}

.child {
width: auto;
margin: 10px;
}
</style>[/code]
×

Success!

Help @Rain_Lover spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...