html - Fluid container, with fluid-fixed-fluid inner layout -


i've tried find solution issue mentioned in title no avail.

basically, have fluid <div> container 3 inner elements (a fixed-width <img> element, fluid width <textarea>, fixed-width <button>).

i've tried few things negative margins no luck. <textarea>'s length trigger button wrap below.

i've added couple of pictures better describe want: screenshot lower window width

and

screenshot larger window width

edit: sum up, i'd have elements 'cover' area , not wrap.

also, i'd avoiding javascript resize listeners. pure css.

you can using percentages: id's or classes used example.

<div id="fluidwrapper" style="width:100%;">     <div id="imagewrapper" style="float:left;width:100px;">         <img>noimg</img>     </div>     <div id="textandbuttonwrapper" style="width:40%;white-space:nowrap;">         <textarea style="width:80%;"></textarea>         <button style="width:20%;">button</button> <!-- okay not fixed @ -->     </div> </div> 

white-space:nowrap actually, searching for, guess. hope helps.


Comments

Popular posts from this blog

c++ - CryptStringToBinary API behavior -

java.util.scanner - How to read and add only numbers to array from a text file -

iphone - Three second countdown in cocos2d -