html - Fixed position footer isn't scrollable horizontally off-screen -
i need footer stay fixed
bottom of page @ times, , need give minimum-width
left content , right content don't collide each other (as per designer's mock up). problem arises if user's viewport skinny, right side of content gets cut off screen, , there's no way access it. i'd not have change way menu behaves (adding media query breakpoints or something) , rather have menu acts more position:absolute
@ bottom la position:fixed
.
any ideas?
.footer { width: 100%; min-width: 500px; position: fixed; bottom: 0; left: 0; background: #eee; height: 50px; } .left { float: left; } .right { float: right; } }
<div class="footer"> <div class="left">my left content</div> <div class="right">my right content</div> </div>
try setting min-width property each side as
.left { float: left; min-width:250px; } .right { float: right; min-width:250px; }
you can set them smaller px size make right side stay open @ smaller width. if want fancy create media query remove float @ width
Comments
Post a Comment