resize target div based on clientwidth of other div whose width is set to auto

Question

I'm trying to dynamically resize the width of one DIV (the target) based on the clientWidth of another (the source).

Note: The CSS Style of the source DIV is width:auto;

1st problem: It doesn't work... it must be my syntax or something..?

2nd problem: It needs to dynamically resize as user changes browser window (recall script on window resize). How ???

Javascript:

<script>

// START RESIZE WIDTH SCRIPT
function resizetarget(){

var resizesource = document.getElementById('section');
var sourcewidth = resizesource.style.clientWidth;
var resizetarget = document.getElementById('collpilewrapper');
var targetwidth = resizetarget.style.clientWidth;

targetwidth = sourcewidth;

}

</script>

CSS:

.section{
    width:auto;
    max-height:75%;
    top:60px;
    bottom:60px;
    margin-bottom:60px;
    left:280px;
    right:0px;
    position:absolute;
    background-color:#FFF;
    white-space:nowrap;
    display:inline-block;
}
.section li{float:left; display: inline; }
.pane{
    overflow:auto;
    clear:left;
    position:relative;
    width:100%;
    height:100%;
    }

#collpilewrapper{
    min-width:900px;
    min-height:100%;
    float:left;
    background-color:#69C;
    display:table-column;
    }

HTML:

<!--start content-->

<div class="section">

<div id="pane-target" class="pane">

<ul class="elements" style="width:16000px">

<!--box 0 -->
<li>
<!-- START landing group -->

    <div id="collpilewrapper">

          <div id="collpile1">
          <img src="images/coll-missy-714x737.jpg" /></div>

          <div id="collpile2">
          <img src="images/coll-girls-602x476.jpg" /></div>

          <div id="collpile3">
          <img src="images/coll-toddler-421x447.jpg" /></div>

    </div>

<!-- END landing group -->

</li>

<!--box 1 -->
<li>
<!-- START missy group -->
<div id="adbox">
<img class="largead" src="images/storypic-na.jpg" />
</div>
<div id="adbox">
<img class="largead" src="images/videostill1.jpg" />
</div>
<!-- END missy group -->

</li>
</ul>     
</div>
</div>

<!--end content-->

Answer 1

jsfiddle

I used jQuery since I find it easier to work with. There's a couple of problems I noticed. You were targeting the element by ID but section is a class, not an id. style.clientWidth isn't officially supported from what I saw when I googled it. It looks like it's something that IE used to use (honestly I don't know anything about it).

jQuery

function resizeWidth(source, target){
    var sourcewidth = $(source).width();

    $(target).css({
        "width": sourcewidth
    });
}

$(window).resize(function() {
    resizeWidth("#section", "#collpilewrapper");
});

Whatever code you place inside of this will run when the window has been resized.

$(window).resize(function() {

});

resizeWidth() is a function that I made myself. It takes in a source and a target.

width() will give you the width of an element.

css() allows us to directly change the CSS.

Lastly, you'll notice that it doesn't look like the large blue box is re-sizing. That's because you've put a minimum width of 900px. Also, the event will only fire when you re-size the browser. It won't do anything when you first load up a page.