scrollWidth

http://stackoverflow.com/questions/28103100/how-to-display-a-div-next-to-another-div-with-no-width-defined

by Ram Tobolski

HTML

<body>

<div id="content">

<div id="post-content">

<div id="cover"></div>
    
<div id="text">
    
<p>Sed (saepe enim redeo ad Scipionem, cuius omnis sermo erat de amicitia) querebatur, quod omnibus in rebus homines diligentiores essent; capras et oves quot quisque haberet, dicere posse, amicos quot haberet, non posse dicere et in illis quidem parandis adhibere curam, in amicis eligendis neglegentis esse nec habere quasi signa quaedam et notas, quibus eos qui ad amicitias essent idonei, iudicarent. Sunt igitur firmi et stabiles et constantes eligendi; cuius generis est magna penuria. Et iudicare difficile est sane nisi expertum; experiendum autem est in ipsa amicitia. Ita praecurrit amicitia iudicium tollitque experiendi potestatem.</p>

<p>Equitis Romani autem esse filium criminis loco poni ab accusatoribus neque his iudicantibus oportuit neque defendentibus nobis. Nam quod de pietate dixistis, est quidem ista nostra existimatio, sed iudicium certe parentis; quid nos opinemur, audietis ex iuratis; quid parentes sentiant, lacrimae matris incredibilisque maeror, squalor patris et haec praesens maestitia, quam cernitis, luctusque declarat.</p>

<p>Et hanc quidem praeter oppida multa duae civitates exornant Seleucia opus Seleuci regis, et Claudiopolis quam deduxit coloniam Claudius Caesar. Isaura enim antehac nimium potens, olim subversa ut rebellatrix interneciva aegre vestigia claritudinis pristinae monstrat admodum pauca.</p>

<p>Ego vero sic intellego, Patres conscripti, nos hoc tempore in provinciis decernendis perpetuae pacis habere oportere rationem. Nam quis hoc non sentit omnia alia esse nobis vacua ab omni periculo atque etiam suspicione belli?</p>

<p>Quibus ita sceleste patratis Paulus cruore perfusus reversusque ad principis castra multos coopertos paene catenis adduxit in squalorem deiectos atque maestitiam, quorum adventu intendebantur eculei uncosque parabat carnifex et tormenta. et ex is proscripti sunt plures actique in exilium alii, non nullos...

CSS

body { margin:0; padding:0; background:black; }

#content { position:absolute; height:100%; top:0; left:0; }

#post-content { position:relative; background:transparent; overflow-x: scroll; overflow-y: auto; height: 100%; top:0; left:0; }

#cover { left:0; top:0; position:absolute; height:100%; width:100%; background: url('http://www.inveralmondchs.org/wp-content/uploads/2014/02/waterfall-godafoss-iceland.jpg') center no-repeat fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: scroll; }

#text { float:left; width: auto; height:100%; left:100%; position: relative; box-sizing: border-box; padding:0px; margin:0px; font-size:15px; text-align: left; color:white; font-family:'open sans'; -webkit-column-width: 300px; -webkit-column-gap: 40px; -moz-column-width: 300px; -moz-column-gap: 40px; -moz-column-count: auto; column-width: 300px; column-gap: 40px; }

#theend { float:left; height:100%; position: absolute; top:0; left: 0; width:300px; text-align:center; background: green; color:white; }

JavaScript

var w1 = document.getElementById("cover").scrollWidth + document.getElementById("text").scrollWidth;

document.getElementById("theend").style.left = w1 + "px";