【jQuery】要素を合わせた横幅の取得について
現在、要素が横並びになった横スクロールのサイトを作成中です。
各コンテンツ要素のsectionの横幅は固定ではなく、
縦幅に合わせて可変するようにしています。
htmlは以下のようにしています。
<div id="wrap">
<div id="header">
<ul><li></li></ul>
</div>
<div id="secWrap">
<div class="section">
ここに内容
</div>
<div class="section">
ここに内容
</div>
</div>
</div>
wrapにsectionの幅を足した合計の横幅（px）を加えたいのですが、
正しいサイズを取得できず、sectionがカラム落ちしてしまいます。
以下のjsの何かが間違っているのでしょうか？
それともCSSなどで何かしらの指定が必要なのでしょうか。
お分かりの方がおられましたらご教授頂けたら幸いです。
■javascript
$(function(){
function adjust(){
var h = $(window).height();
var h1= $('#header').height();
$('.section').css('height', h-h1);
var cont = $('.wrap');//コンテンツの横サイズ
var contW = $('.section').outerWidth(true) * $('div',cont ).length;
cont.css('width', contW);
var speed = 50;
$('html').mousewheel(function(event, mov) {
$(this).scrollLeft($(this).scrollLeft() - mov * speed);
$('body').scrollLeft($('body').scrollLeft() - mov * speed);
return false;
});
}
adjust();
$(window).on('resize', function(){
adjust();
})
});
■CSS
body { height: 100%; overflow-y: hidden;}
html{height: 100%; }
#header{
position: fixed; height: 50px; left: 0px; top: 0px;}
.wrap{
top: 50px; position:absolute; height:100%; }
.section { float:left; }
