CODEWITHSUNDEEP
csshtml
MaiaVictor
MaiaVictor

Reputation: 53077

How to make a child div fill all remaining horizontal space of its parent div in HTML?

test http://o7.no/U5w2EV

The structure for this is:

<div id='container'>
    <div id='play'>▶</div>
    <div id='res'>RES</div>
    <div id='bar'>test</div>
    <div id='time'>0</div>
</div>

The styles are:

for #container

 #container
{backgroundColor:'#CCCCCC',
position:'absolute',
bottom:'-40px',
width:'100%',
height:'40px'}

for Buttons #res and #bar

#res , #bar
 {width:30px; 
 height:30px; 
 border:1px solid #DDDDDD; 
 margin:5px; 
 font-weight:bold; 
 cursor:pointer; 
 float:left}

for #time

#time
 {float:'left',fontSize:'16px',margin:'12px 5px'}

Note: the width of the container of the container (where it takes the 100%) changes dinamically.

How to set the CSS as to the #bar div fill all the space remaining from the other divs?

Upvotes: 1

Views: 1175

Answers (3)

MaiaVictor
MaiaVictor

Reputation: 53077

I couldn't do it with CSS in a satisfactory manner so I added a JavaScript listening to resize attempts which would keep it the right size mathematically.

Upvotes: 0

Manoj De Mel
Manoj De Mel

Reputation: 1015

You can add another <div> at the bottom after <div id='time'> and set the style clear:both

Upvotes: 0

Stone
Stone

Reputation: 2668

You've got incomplete code posted above. It's also formatted incorrectly (css).

But I "think" if you remove the css float on the inner <div>'s and instead make them display: inline-block; you should be able to declare CSS width: percentages on the inner <div>'s and have them fill your container.

Upvotes: 1

Related Questions