I'm looking for a way to retrieve, in javascript, the max possible width of an HTML element with display: inline-block. My goal is to insert some elements in a page generated by a CMS. I need the max possible width to adjust the content to be inserted in it.
Example:
HTML:
<...>
<div class="ib">
<div class="b">
<div class="b" id="my_content">
...
<div>
<div>
</div>
<...>
CSS:
.ib {
display: inline-block;
}
.b {
display: block;
}
I can only manage the element "my_content" and it's content. The parent elements are generated by the CMS, and I cannot change anything. Using jQuery is ok.
[EDIT]
Here's a jsfiddle for a better explaination.
Before inserting content in #my_content, I need to know the available width.
If there's no content in #my_content, I get a width of 0, even if I set width:100%
and max-width:100%
.
The CMS currently generates this structure. As I don't have any control on this, it may change in the future.