Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <head>
- <title>Trains, Planes, Automobiles, and Boats</title>
- <meta charset="UTF-8">
- <style type="text/css" media="screen">
- html, body { background:#ddd; margin:0; padding:0; height:100%; }
- #foo { position:absolute; left:5%; width:60%; top:5%; height:80%; background:#dcc; }
- #bar { position:absolute; left:70%; width:25%; top:5%; height:80%; background:#cbd; vertical-align: middle; }
- .fullwidth { width: 100%; vertical-align: middle; }
- .vcenter {
- display: block;
- margin: 0 auto;
- }
- </style>
- </head>
- <body>
- <div id="foo">
- <div class="vcenter">
- <img class="fullwidth" src="https://openclipart.org/image/800px/svg_to_png/19623/philrich123-A380.png" />
- </div>
- </div>
- <div id="bar">
- <img class="fullwidth" src="https://openclipart.org/image/800px/svg_to_png/4703/ryanlerch-Steam-Train-Engine.png" />
- <img class="fullwidth" src="https://openclipart.org/image/800px/svg_to_png/19623/philrich123-A380.png" />
- <img class="fullwidth" src="http://openclipart.org/image/800px/svg_to_png/74557/rally-car.png" />
- <img class="fullwidth" src="https://openclipart.org/image/800px/svg_to_png/196201/Model-T-Ford.png&disposition=attachment" />
- <img class="fullwidth" src="https://openclipart.org/image/800px/svg_to_png/24418/Jarno-Boat-1.png&disposition=attachment" />
- </div>
- </body>
- #bar{
- overflow: scroll;
- }
- position: relative;
- top: 50%;
- transform: translateY(-50%);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement