CODEWITHSUNDEEP
htmlcss
Jared Teng
Jared Teng

Reputation: 311

How to dynamically change width of Div1 inside a scrollable Div2 to Div2's width

How to dynamically change width of Div1 inside a scrollable Div2 to Div2's width. Check this Jsfiddle http://jsfiddle.net/xdKrF/34/ You will see that the green background stops at 1 point(at default width size). I would like to make the div with the green background expand to the whole scrollable div.

Important requirement, TEXT must never be altered and must stay in 1 line.

Does anyone have a simple solution to this? Complex/hacky solution I can think of is scrollable will have 1000% width and when its not scrollable it would be default/100%. Using @media.

HTML

<div id="container" style="overflow:auto">
<div id="content">
    Well hello
</div>
<p>TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>

CSS

#content{
white-space:nowrap;
background:green;
}

Upvotes: 5

Views: 108

Answers (3)

R Lam
R Lam

Reputation: 393

OK, I have found a solution.

Wrap a container and apply float:left; for it.

http://jsfiddle.net/2ugbkb6r/

Upvotes: 2

Ashot Khanamiryan
Ashot Khanamiryan

Reputation: 1134

May be there is will be better answer, but it's working. Just add display:table; to #container http://jsfiddle.net/xdKrF/36/

Upvotes: 2

Aramil Rey
Aramil Rey

Reputation: 3475

Here is the code: ( JS Fiddle)

#content{
    white-space:nowrap;
    background:green;
}
#container {
    margin: 0 auto;
    width: 90%;
    overflow: auto;
    word-wrap: break-word;    
}
<div id="container">
    <div id="content">
        Well hello
    </div>
    <p>
        TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
    </p>  
</div>

Upvotes: 0

Related Questions