html - Two divs side by side with one div absolute -
so have html
<div class="app-wrapper"> <div class="search-form"/> <div class="results"> <div class="tabs"/> </div> </div>
search-form has absolute positioning , floated left. want tabs appear next it, @ top of page. note doesn't have tabs on screen(fixed not required).
right have
.search-form { position: absolute; width: 30%; min-width: 200px; max-width: 350px; height: 100%; min-height: 600px; float: left; } .tabs { position: fixed; border-bottom: 1px solid @section-border; width: 70%; height: 3.0em; float: right; left: 31%; background: @tabs-background; }
but doesn't work because on larger screens distance between tabs , search-form expands.
how tabs next search-form, fills rest of page, , distance between tabs , search-form not depend on screen size?
so realized tabs inside of div, css
.results { width: 70%; }
maybe looking for: http://jsbin.com/ofagoq/11/edit
the css:
.search-form { background-color: red; width: 30%; min-width: 200px; max-width: 350px; height: 100%; min-height: 600px; float: left; } .tabs { background-color: green; width: 70%; height: 3.0em; }
Comments
Post a Comment