html - How do I stretch two div-elements to fill available horizontal space? -


i hope can me.

i created this fiddle show i'm trying do.

my question is: how stretch 2 div-elements fill available horizontal space?

as can see there 5 div-elements strung together, wrapped div-element set background-color , width 100%.

there 3 div-elements width of 50px.

the width of other 2 div-elements should fill rest availiable space, should have same width, ->50% each of both divs.

my problem 50% both div-elements amount 100% total-width. , not availiable space width.

i'm trying not use tables, etc.

let me know if there unclear.

edit: i'd hear comments way.

one way solve treat divs cells of table. unique property of tables cells fill width of table no matter widths give them. giving cells width other cells fill remaining space. using display:table , display:table-cell can take advantage of without changing html. have @ example:

http://jsfiddle.net/gyxwm/

i've not tested should work in "current" browsers. should work in ie8+ doesn't work in ie7 , won't work in ie6.


Comments

Popular posts from this blog

asp.net - repeatedly call AddImageUrl(url) to assemble pdf document -

java - Android recognize cell phone with keyboard or not? -

iphone - How would you achieve a LED Scrolling effect? -