That doesn't help me, because then they will appear outside my content area. You see I have a colored background which I would like all the content to go in, and if I use float then the thumbnails will lap over it. To make it more clear, here are two images: Without float: With float: And here's my code: HTML:
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Robbert Bruggeman's Portfolio - Gallery</title> <link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" charset="utf-8" /> <link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" charset="utf-8" /> <script src="scripts/mootools-1.2.1-core-yc.js" type="text/javascript"></script> <script src="scripts/mootools-1.2-more.js" type="text/javascript"></script> <script src="scripts/jd.gallery.js" type="text/javascript"></script> <script src="opennewwindow.js" type="text/javascript"></script><link rel="icon" type="image/png" href="../favicon.png" /><link href="../stylesheets/stylesheet/style.css" rel="stylesheet" title="Style" type="text/css" /></head><body><!-- Background start --><div class="backgroundtop"></div><div class="background"><a href="../index.html" class="header"></a><!-- Menu Start --><ul class="menu1"><li><a id="left"></a></li><li><a id="home" href="../index.html"><b>Home</b></a></li><li><a id="about" href="../about me/about.html"><b>About Me</b></a></li><li><a id="projects" href="../projects/projects.html"><b>Projects</b></a></li><li class="current"><a id="gallery" href="gallery.html"><b>Gallery</b></a></li><li><a id="contact" href="../contact/contact.html"><b>Contact</b></a></li><li><a id="right"></a></li></ul><!-- Menu End --><!-- Background2 Start --><div class="background2top"></div><div class="background2"><!-- Content Start --><div class="content"><!-- ContentArea Start --><h1>// Gallery</h1><div class="content_areatop"></div><div class="content_area"><div class="gallery"><a class="thumbnail" href="blacksmith.png" title="Dwarf Blacksmith"><img class="gallery" src="blacksmith_thumb.png" alt="Dwarf Blacksmith"></a><a class="thumbnail" href="mooncastle.png" title="Castle Among The Stars"><img class="gallery" src="mooncastle_thumb.png" alt="Castle Among The Stars"></a></div></div><div class="content_areabottom"></div><!-- ContentArea End --></div><!-- Content End --></div><div class="background2bottom"></div><!-- Background2 End --><div class="layout_copyright">Copyright© Robbert Bruggeman</div></div><div class="backgroundbottom"></div><!-- Background End --></body></html>
CSS:
@charset "utf-8";/* CSS Document */html{ height: 100%;}body { min-height: 101%; text-align: center; color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-weight: bold;background: #071a2e;}a.chapter{ text-decoration: none;}a:hover.chapter{ color: #FFFFFF;}h1{ margin: auto; text-align: left; padding-bottom: 15px; background: no-repeat; height: 17px; width: 595px; font-weight: bolder; font-family: "Myriad Pro", Verdana; font-size: 25px; color: #FFF; text-transform: uppercase; text-shadow: 2px 2px 3px #000000;}h2{ margin-top: 0px; text-align: left; font-weight: bold; font-size: 15px;}.gallery_preview{text-align: center;}.listedtext{font-weight: bold;font-size: 18px;color: #FF3;display: inline;}.descriptiontext{text-align: center;font-style: italic;font-family: Arial, Helvetica, sans-serif; font-size: 15px; font-weight: lighter; color: #FFFFFF;padding-bottom: 3px;}a.links{ font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #EEEEEE; text-decoration: underline;list-style-type: none;padding-left: 15px;background-image: url(bullet.png);background-repeat: no-repeat;background-position: left center;}a.email{font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #EEEEEE; text-decoration: underline;list-style-type: none;}a{ color: #FFFFFF; font-size: 18px; font-weight: normal;}a:hover{ font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #f6ff00;}a.snelkoppelingen{ color: #FFFFFF; font-size: 18px; font-weight: normal;}a.snelkoppelingen:hover{ color: #f6ff00; font-size: 18px; font-weight: normal;}.header{ margin-right: auto; margin-left: auto; background-image: url(banner/banner.png); height: 200px; width: 800px;display: block;}.background{ margin-right: auto; margin-left: auto; padding-bottom: 0px; padding-top: 0px; width: 820px; height: auto; background: #154b86;}.backgroundtop{margin-right: auto;margin-left: auto;width: 820px;height: 10px;background: url(background/background_top.png);}.backgroundbottom{margin-right: auto;margin-left: auto;width: 820px;height: 10px;background: url(background/background_bottom.png);}.background2{ margin-right: auto; margin-left: auto; padding-bottom: 20px; padding-top: 20px; height: auto; width: 800px; background: #1e6abe;}.background2top{margin-right: auto;margin-left: auto;width: 800px;height: 10px;background: url(background/background2_top.png);}.background2bottom{margin-right: auto;margin-left: auto;width: 800px;height: 10px;background: url(background/background2_bottom.png);}hr{ border: none; border-top: 1px solid #FFFFFF;}.menu1 li b{text-indent: -9999em;display: block;}.menu1{height: 50px;width: 800px;text-transform: uppercase;padding: 0px;margin-left: auto;margin-right: auto;}.menu1 li{float: left;height: 100%;list-style-type: none;}.menu1 a{float: left;display: block;height: 100%;text-align: center;text-decoration: none;color: #FFF;width: 100%;background: url(menu/menubar.png) no-repeat;}.menu1 a#left{width: 110px;background-position: 0 0;}.menu1 a#right{width: 112px;background-position: right 0;}.menu1 a#home{width: 87px;background-position: -110px 0;}.menu1 a#about{width: 131px;background-position: -197px 0;}.menu1 a#projects{width: 126px;background-position: -328px 0;}.menu1 a#gallery{width: 115px;background-position: -454px 0;}.menu1 a#contact{width: 119px;background-position: -569px 0;}.menu1 a#home:hover, .menu1 .current a#home{background-position: -110px bottom;}.menu1 a#about:hover, .menu1 .current a#about{background-position: -197px bottom;}.menu1 a#projects:hover, .menu1 .current a#projects{background-position: -328px bottom;}.menu1 a#gallery:hover, .menu1 .current a#gallery{background-position: -454px bottom;}.menu1 a#contact:hover, .menu1 .current a#contact{background-position: -569px bottom;}.content{ margin: 0 auto; padding-top: 5px; padding-bottom: 50px; text-align: left;}.content_area{margin-left: auto;margin-right: auto; width: 555px; text-align: left; background: #3284de; padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: lighter; color: #FFFFFF; /* border: solid 1px #111; */}.content_areatop{margin-right: auto;margin-left: auto;width: 595px;height: 10px;background: url(background/content_area_top.png);}.content_areabottom{margin-right: auto;margin-left: auto;width: 595px;height: 10px;background: url(background/content_area_bottom.png);}.gallery{padding-left: 0px;}a.thumbnail{float: left;display: block;width: 150px;height: 150px;border: #FFF;background: #036;}a img.gallery{border: 1px solid #FFF;}a img{ border: 1px solid #2243a5;}img.noborder{ border: none;}img.aleft{ float: left; padding-bottom: 50px;padding-top: 3px; margin-right: 10px;}.layout_copyright{ font: bold 11px/0px Verdana, Arial, Helvetica, sans-serif; color: #FFF; text-transform: uppercase; padding-top: 20px;padding-bottom: 10px; text-align: center; font-size: 10px;}.twitter{padding-top: 10px;padding-right: 9px;text-align: right;}ul li.koppelingen{list-style-type: none;padding-left: 20px;padding-bottom: 0px;background-image: url(bullet2.png);background-repeat: no-repeat;background-position: left center;}.tab{margin-left: 160px;}
