Fix left and right floating images in HTML

http://stackoverflow.com/questions/13830123/fix-left-and-right-floating-images-in-html

by Ruben Ruiz Perez

HTML

<div id="banner">
    <img id="left" src="http://www.google.com/images/srpr/logo3w.png" />
    <img id="right" src="http://www.google.com/images/srpr/logo3w.png" />
</div>
<div id="whatever"></div>

CSS

#banner {
    width: 100%;
    min-width: 800px;
    height: 60px;
    background-color: lightblue;
    z-index: 1;
    position: fixed;
    opacity: 0.8; }

#left {
    float: left;
    margin: 5px 0 0 10px;
    height: 40px; }
#right {
    float: right;
    margin: 5px 10px 0 0;
    height: 40px; }

#whatever { height: 1000px; }