friends_1427
New Member
I have two main divs #left and #right which are in another #content div, right next to each other. #left contains a jeditable field. #right is floating on right. When the jeditable field is clicked, it jumps below the #content. You can try it here (click "kala"): http://jsfiddle.net/BuDLC/14/If I remove the floating from #right, the field works as expected, ie. the input field appears on top of the editable div.HTML:\[code\]<div id="content"> <div id="right"> right </div> <div id="left"> <div class="edit">Kala</div> </div></div>\[/code\]CSS:\[code\]body { background: gray; height: 100%;}.edit { border-bottom-style: dotted; border-bottom-color: lightgray; border-bottom-width: 1px; background: green;}.edit form, .edit input { margin: inherit; padding: inherit; font: inherit; color: inherit; background: inherit; border: none;}#content { width: 300px; height: 100px;}#right { float: right; width: 100px; background-color: khaki;}#left { width: auto; min-width: 150px; background-color: blue;}#right, #left { height: 100%; }\[/code\]Please MTV, pimp my HTML/CSS