You are floating the image but not the figure element so the image floats out of the container because it is not containing the floats. You would be better off floating the figure and not the image (or better still use inline-block so that they don’t snag when they wrap.
e.g.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Photographic album</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<link rel="stylesheet" href="Photo.css">
<style>
body {
margin:0;
padding:0;
font: 100%/1.3 arial, helvetica, sans-serif;
background:yellow;
}
#wrap {
width:100%;
max-width:1200px;
margin:0 auto;
/*temporary text styles below*/
text-align:center;
font-family: 'Noto Serif', serif;
font-weight:bold;
color:white;
}
#header {
width:100%;
height:140px;
background-color:#910000;
overflow: hidden;
margin:5px auto 10px;
}
#header #clock {
float:left;
width: 180px;
height:140px;
background-color:#910000;
margin-top:-10px;
margin-left:60px;
}
#header #clock #position {
float:left;
text-align:center;
margin-top:10px;
margin-left:20px;
color:white;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.cityTimeDate span {
display:block;
}
#city {
font-size:16px;
color:white;
}
#time {
font-size:36px;
color:#CDCD5C;
}
#London #date {
font-size:15px;
color:white;
}
#header #title {
height:140px;
background-color:#910000;
color:#E1E19D;
font-size:250%;
line-height:60px;
margin:0 auto;
white-space:nowrap;
font-weight:400;
}
#title h1 {
font-size:40px;
font-family:Times New Roman;
}
#main {
display:table;
width:100%;/*IE6 haslayout (contain floats)*/
overflow:hidden;/*contain child floats in modern browsers*/
}
#sidebar {
display:table-cell;
vertical-align:top;
width:15%;
max-width:15%;
background:red
}
#gallery {
display:table-cell;
vertical-align:top;
margin:0 auto;
width:85%;
background:green;
}
.img-container{text-align:left}
.img-container img {
border:0;
width:100%;
height:auto;
}
.clear {
clear:both;
}
#footer {
max-width:1200px;
margin:10px auto;
min-height:50px;
background:#910000;
text-align:center;
}
figure {
display:inline-block;
vertical-align:top;
margin:10px 1%;
max-width:22%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="clock">
<div id="position">
<div id="London" class="cityTimeDate"></div>
</div>
</div>
<!-- close clock -->
<div id="title">
<h1>Photo Gallery</h1>
</div>
<!-- close title -->
</div>
<!-- close header -->
<div id="main">
<div id="sidebar"> hello </div>
<div id="gallery">
<p>Thumbnails</p>
<div class="img-container">
<figure> <img src="http://pintotours.net/Pinto/images/logo.jpg" alt="The Pulpit Rock" width="240" height="160">
<figcaption>A view of the pulpit rock in Norway.</figcaption>
</figure>
<figure> <img title="Logo" alt="Logo" width="240" height="160" src="http://pintotours.net/Pinto/images/logo.jpg">
<figcaption>A view of the pulpit rock in Norway.</figcaption>
</figure>
<figure> <img title="Logo" alt="Logo" width="240" height="160" src="http://pintotours.net/Pinto/images/logo.jpg">
<figcaption>A view of the pulpit rock in Norway.</figcaption>
</figure>
<figure> <img title="Logo" alt="Logo" width="240" height="160" src="http://pintotours.net/Pinto/images/logo.jpg">
<figcaption>A view of the pulpit rock in Norway.</figcaption>
</figure>
<figure> <img title="Logo" alt="Logo" width="240" height="160" src="http://pintotours.net/Pinto/images/logo.jpg">
<figcaption>A view of the pulpit rock in Norway.</figcaption>
</figure>
<figure> <img title="Logo" alt="Logo" width="240" height="160" src="http://pintotours.net/Pinto/images/logo.jpg">
<figcaption>A view of the pulpit rock in Norway.</figcaption>
</figure>
<figure> <img title="Logo" alt="Logo" width="240" height="160" src="http://pintotours.net/Pinto/images/logo.jpg">
<figcaption>A view of the pulpit rock in Norway.</figcaption>
</figure>
</div>
</div>
<!-- close gallery -->
</div>
<!-- close main -->
</div>
<!-- close wrap -->
<div class="clear"></div>
<div id="footer">Footer</div>
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "/Pinto/scripts/googleanalytics.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
</body>
</html>
I didn’t change your html but if I remember correctly I removed the floats from your images and applied inline-block to the figure element instead. Your online code doesn’t have the floated images so it looks ok to me.
You may want to add media queries and go form 4 across to 3 across and so on at suitable widths.
First the gallery has sunk below the sidebar, and second, strangest of all (for me…) is that I apllied a colour to the sidebar and it is displayed in the main body! I made it red now to be more easily understood