-float-L3-
-HTML-
<body> <div id="wrap" class="clearfix"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Shop</a></li> <li><a href="#">Map</a></li> </ul> <p><img src="images/Pex263041.jpg" alt=""></p> <div> <p><img src="images/Pex921374.jpg" alt=""></p> <p><img src="images/Pex1684376.jpg" alt=""></p> </div> </div> </body>
-CSS-
* { margin: 0; padding: 0; } .clearfix:after { content: ""; display: block; clear: both; } body { background: khaki url(images/pattern2.png) repeat-x left 350px; background-size: 300px; } #wrap { width: 820px; margin: 20px auto 0; padding: 10px; background: white; } img { width: 100%; vertical-align: bottom; } img:hover { opacity: 0.7; } /*left*/ ul { width: 140px; list-style: none; float: left; } li { line-height: 78px; text-align: center; } li:not(:last-of-type) { margin-bottom: 3px; } a { display: block; background: sienna; text-decoration: none; color: white; } a:hover { background: burlywood; color: brown; } /*center*/ #wrap > p { width: 450px; float: left; } #wrap > p img { height: 340px; } /*right*/ #wrap > div { width: 230px; float: left; } #wrap > div p img { height: 170px; }