-float-L2-
-HTML-
<body> <div id="wrap"> <ul class="clearfix"> <li><a href="#">Home</a></li> <li><a href="#">Shop</a></li> <li><a href="#">Map</a></li> </ul> <p><img src="images/Pex949586.jpg" alt=""></p> <div class="clearfix"> <p><img src="images/Pex1070945.jpg" alt=""></p> <p><img src="images/Pex256737.jpg" alt=""></p> </div> </div> </body>
-CSS-
* { margin: 0; padding: 0; } .clearfix:after { content: ""; display: block; clear: both; } body { background: powderblue url(images/stripe.png); background-size: 50px; } a { display: block; text-align: center; text-decoration: none; color: snow; } a:hover { background: rgba(255,255,255,0.5); color: maroon; } img { width: 100%; vertical-align: bottom; } #wrap { width: 500px; margin: 10px auto 0; padding: 10px; background: crimson; } ul { margin-bottom: 20px; padding: 5px 0 0 10px; border-bottom: solid 3px white; list-style: none; } li { width: 100px; border: solid 1px white; border-bottom: none; float: left; } #wrap > p { width: 494px; margin-bottom: 5px; border: solid 3px white; } #wrap > div p { width: 242px; border: solid 2px white; float: left; } #wrap> div p img { height: 150px; } #wrap > div p:first-of-type { margin-right: 8px; }