css - Side by side boxes: how to make one slide underneath? -


imagine 2 boxes side side. right 1 floated right, fixed width holding photo, , left contains text fills remaining width left edge of container.

if resize (squash down) browser want text in left box fluid. ok far good...

here's difficult part: need minimum width on left container, when reached, text box stops reducing, , right photo box starts sliding underneath left box until disappears. possible?

any appreciated!

you can achieve z-index overlapping positioning, cannot floating. you'll have this:

http://jsfiddle.net/jphb2/

code , inline explanation:

.leftbox {     position: relative; /* stay sort of in document flow */     z-index: 2; /* positioned @ level 2 */     min-width: 200px; /* minimum width @ stop getting smaller */     margin-right: 200px; /* catering right column */     background-color: rgba(155, 155, 255, 0.8); /* transparent can see right box go 'underneath' */ }  .rightbox {     position: absolute; /* remove document flow */     right: 0; /* sit want */     top: 0; /* sit want */     z-index: 1; /* positioned @ level 1, below level 2 */     width: 200px; /* set width */     background-color: rgba(255, 155, 155, 0.8); /* uhh, colours nice */ } 

Comments

Popular posts from this blog

java - WrongTypeOfReturnValue exception thrown when unit testing using mockito -

php - Magento - Deleted Base url key -

android - How to disable Button if EditText is empty ? -