Css: align image and select with overflow -


i have following html code :

<div>     <img src="..." />     <select> ... </select> <div> 

and following css :

div {      width: 100px;     height: 32px;     overflow: hidden; } img { width: 32px } select {      width: 150px;     display: inline-block; } 

i need vertical align image , select field. fact select field in overflow normal. goal show part of select field not in overflow next image.

currently, select field below image.

i'm no sure if explanation clear, ask more details if need.

you need nest 2 divs: outer 1 "overflow:hidden;", , inner 1 wide enough contain 2 elements:

html:

<div class="wrap">     <div class="inner">         <img />         <select></select>     </div> </div> 

css:

div.wrap {     width:100px;     height:32px;     overflow:hidden; } div.inner {    width:200px; } img {width: 32px;} select {width: 150px;} 

Comments

Popular posts from this blog

java - How to Configure JAXRS and Spring With Annotations -

visual studio - TFS will not accept changes I've made to a Java project -

php - Create image in codeigniter on the fly -