1. Home
  2. Forums Index
  3. Browser Side / CSS 3:36 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Inserted photo gallery, page layout broken

         

Dmac

10:22 pm on Nov 3, 2010 (gmt 0)

10+ Year Member



I inserted a photo gallery into a Stu Nicholls CSS page layout. Now 3 middle columns underneath the gallery won't align horizontally. They're all over the place. Remove the gallery and proper alignment is restored, so that confirms the source of the problem, kinda. But I can't see why it it breaking the layout. Tags look okay, code validates, etc. Please help the Newbie! :)
The layout has a header, footer, a left and right column, a center div under the header where the gallery is, and three columns under the gallery. Here is my code with styles included: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Colorful Harvest, grower of fresh and unique vegetables and berries.</title>
<meta name="Author" content="Copyright: Stu Nicholls at CSSPlay.com - Customized by Douglas McFarland at Colorful Harvest" />
<meta name="Keywords" content="vegetables, fruit, berries, health, nutrition, recipes, cooking, food, taste, corn, cauliflower, broccoli, melons, carrots, strawberries, blueberries, blackberries, raspberries, farming, natural, grower, culinary, food service, grocery" />
<meta name="Description" content="Colorful Harvest, GROWER of Heirloom style Fresh VEGETABLES, and BERRIES all Year round; with Recipes and Healthful lifestyle Tips." />
<meta http-equiv="imagetoolbar" content="no" />

<style type="text/css">
/* ================================================================
The original version of this stylesheet and the associated (x)html
is available at http://www.cssmenus.co.uk
Copyright (c) 2009- Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */

/* Begin index.html styles */

body {font-size:76%; font-family:"trebuchet MS", verdana, arial, sans-serif; margin:25px auto; background:#aaaaaa;}
#minMax {min-width:900px; max-width:900px; margin:0 auto; background:#e0e0e0;}
#header {background:#a31e39;}

#outer1 {float:left; width:20%; background:#d0c0c0;}
#outer2 {float:left; width:15%; background:#c0c0c0;}
#outer3 {float:left; width:30%;}
#outer4 {float:right; width:15%; background:#d0d0d0;}
#outer5 {float:right; width:20%; background:#c0b0b0;}
#outer1, #outer2, #outer3, #outer4, #outer5 {padding-bottom:32767px; margin-bottom:-32767px;}

#wrapper {overflow:hidden;}

#topbar {width:60%; float:left; background:#d8d8d8;}

#footer {clear:both; background:#455c5a;}

h1 {font-size:20px; margin:0; padding:10px 0; color:#fff;}
h3 {font-size:18px; margin:0; padding:8px 0;}
.content {padding:10px;}
p {font-size:12px; line-height:1.5em; margin:0; padding:5px 0;}
#footer p,
#header p {color:#fff;}
#footer a {color:#fff;}
#footer a:hover {text-decoration:none;}

/* end index.html styles */

/* Begin vertical flyout menu styles */

#flyout {float:left; padding:0; margin:3px 0 0 0; list-style:none; position:relative; width:130px; z-index:20;}
#flyout ul {padding:0; margin:0; list-style:none; width:130px; height:auto; background: url(../images/trans.gif); position:absolute; left:-9999px; top:0;}
#flyout table {border-collapse:collapse; width:0; height:0; margin:-1px -10px;}

#flyout li {float:left; margin-bottom:1px;}
#flyout li a {display:block; float:left; width:130px; height:24px; background:#888; color:#000; line-height:24px; font-family:arial, sans-serif; font-size:11px; text-decoration:none; text-indent:10px;}
#flyout li a.fly {background:#888 url(../images/right-arrow.gif) no-repeat right center;}

#flyout li:hover {position:relative;}
#flyout li a:hover {position:relative; background-color:#e60; color:#fff;}
#flyout li:hover > a {background-color:#e60; color:#fff;}

#flyout ul li a {background:#aaa;}
#flyout ul li a.fly {background:#aaa url(../images/right-arrow.gif) no-repeat right center;}
#flyout ul ul li a {background:#ccc;}
#flyout ul ul li a.fly {background:#ccc url(../images/right-arrow.gif) no-repeat right center;}
#flyout ul ul ul li a {background:#ddd;}

#flyout li a.current,
#flyout ul li a.current,
#flyout ul ul li a.current,
#flyout ul ul ul li a.current {background-color:#c40; color:#fff;}

#flyout :hover ul,
#flyout :hover ul :hover ul,
#flyout :hover ul :hover ul :hover ul {left:120px;}

#flyout :hover ul ul,
#flyout :hover ul :hover ul ul {left:-9999px;}

#flyout ul li:hover > a {background-color:#e60; color:#fff;}
#flyout ul ul li:hover > a {background-color:#e60; color:#fff;}

/* End vertical basic flyout menu styles */

/* Begin center gallery styles 1*/

a, a:visited, a:hover {}

#container {position:relative; width:450px; height:700px; background:#888; border:1px solid #000; margin:5px auto; font-family:verdana, arial, sans-serif; font-size:12px;}

#container a.pics {float:left; padding:7px 7px; display:inline; color:#000; text-decoration:none; width:75px; height:75px; cursor:default;}
#container a.pics img.thumb {display:block; border:1px solid #000;}

#container a.pics span {display:none; border:0; width:444px; background:#bbb; border:1px solid #fff; text-align:center;}
#container a.pics span img {margin:0px auto; border:1px solid #000;}

#container a.pics:hover {white-space:normal;}
#container a.pics:hover img.thumb {border:1px solid #fff;}
#container a.pics:hover span {display:block; position:absolute; left:2px; top:192px; z-index:10; height:500px;}

#container a.pics:active img.thumb {border:1px solid #fc0;} 
#container a.pics:active span {display:block; position:absolute; left:2px; top:192px; z-index:5; height:500px;}

#container a.pics:focus {outline:0;}
#container a.pics:focus img.thumb {border:1px solid #fc0}
#container a.pics:focus span {display:block; position:absolute; left:2px; top:192px; z-index:5; outline:0; height:500px;}

#container span.info {clear:left; display:block; text-align:center; line-height:20px; margin:0; padding:200px 0 0 0; text-align:center; color:#eee; z-index:1;}
#container span.info a {color:#000;}
#container span.info a:hover {text-decoration:none;}
/* End center gallery styles 1*/

</style>

<!--[if lte IE 7]>
<style type="text/css">
/* hack to compensate for IE and percentage widths rounding errors */
#topbar {width:60.6%;}
#outer3 {width:29.8%;}
#outer5 {width:19.2%;}
/* for IE6 */
* html #wrapper {display:inline-block;}
* html #minMax {width: expression(document.body.clientWidth < 702? "700px" : document.body.clientWidth > 1102? "1100px" : "auto");}
</style>
<![endif]-->

</head>
<body>
<div id="minMax">
   <div id="header">
   <div class="content">
   <h1>CSS play - SIMPLE Flexible Layout - maximum width 1100px - minimum width 700px</h1>
   <p>Resize you browser window and watch it stay in shape. NO graphics have been used in this demonstration (except for the 'Donate' button).</p>
   </div>
  </div> <!-- end header -->

  <div id="wrapper">
   <div id="outer1">
 <div class="content">
 
<h3>Left Column 20%</h3>
    <p></p>
    <p></p>
    <p></p>
   </div> <!-- end content -->
   </div> <!-- end left column -->
   
<!-- Begin TopBar center Gallery -->
<div id="topbar">
<div id="container">
<a class="pics" href="#nogo"><img class="thumb" src="http://www.#*$!/menu/spole/sph1.jpg" alt="" />
<span><img src="http://www.#*$!/menu/spole/simonh1.jpg" alt="Warm to Cold" title="Warm to Cold" /><br />Warm to Cold</span>
</a>
<a class="pics" href="#nogo"><img class="thumb" src="http://www.#*$!/menu/spole/sph2.jpg" alt="" />
<span><img src="http://www.#*$!/menu/spole/simonh2.jpg" alt="Wheels" title="Wheels" /><br />Wheels</span>
</a>
<a class="pics" href="#nogo"><img class="thumb" src="http://www.#*$!/menu/spole/sph3.jpg" alt="" />
<span><img src="http://www.#*$!/menu/spole/simonh3.jpg" alt="Urban Squirrel" title="Urban Squirrel" /><br />Urban Squirrel</span>
</a>
<a class="pics" href="#nogo"><img class="thumb" src="http://www.#*$!/menu/spole/sph4.jpg" alt="" />
<span><img src="http://www.#*$!/menu/spole/simonh4.jpg" alt="Mother and Daughter" title="Mother and Daughter" /><br />Mother and Daughter</span>

</a>
<a class="pics" href="#nogo"><img class="thumb" src="http://www.#*$!/menu/spole/sph5.jpg" alt="" />
<span><img src="http://www.#*$!/menu/spole/simonh5.jpg" alt="River Junk" title="River Junk" /><br />River Junk</span>
</a>
<a class="pics" href="#nogo"><img class="thumb" src="http://www.#*$!/menu/spole/spv1.jpg" alt="" />
<span><img src="http://www.#*$!/menu/spole/simonv1.jpg" alt="Portrait One" title="Portrait One" /><br />Portrait One</span>
</a>
<a class="pics" href="#nogo"><img class="thumb" src="http://www.#*$!/menu/spole/spv2.jpg" alt="" />
<span><img src="http://www.#*$!/menu/spole/simonv2.jpg" alt="Portrait Two" title="Portrait Two" /><br />Portrait Two</span>
</a>
<a class="pics" href="#nogo"><img class="thumb" src="http://www.#*$!/menu/spole/spv3.jpg" alt="" />
<span><img src="http://www.#*$!/menu/spole/simonv3.jpg" alt="Portrait Three" title="Portrait Three" /><br />Portrait Three</span>
</a>

<a class="pics" href="#nogo"><img class="thumb" src="http://www.#*$!/menu/spole/spv4.jpg" alt="" />
<span><img src="http://www.#*$!/menu/spole/simonv4.jpg" alt="Bow and Fiddle rock" title="Bow and Fiddle rock" /><br />Bow and Fiddle rock</span>
</a>
<a class="pics" href="#nogo"><img class="thumb" src="http://www.#*$!/menu/spole/spv5.jpg" alt="" />
<span><img src="http://www.#*$!/menu/spole/simonv5.jpg" alt="The Pose" title="The Pose" /><b><br />The Pose</b></span>
</a>
<span class="info">Photographs<br />by kind permission of<br /><a href="http://www.simon-pole.co.uk/">Simon Pole</a></span>
</div>
</div>
<!-- End Center gallery -->
 
   <div id="outer5">
   <div class="content">
    <h3>Right 20%</h3>
    <p>Etiam ullamcorper purus eget felis. Ut mollis pretium nisl. Nulla suscipit pellentesque lacus. Sed condimentum iaculis massa. In leo nisl, porttitor at, fermentum a, vulputate nec, dui. Praesent quis nisi eget felis tincidunt tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla augue. Duis in ipsum at ante egestas accumsan.</p>
   </div> <!-- end content -->
   </div> <!-- end outer5 -->

   
   <div id="outer2">
   <div class="content">
    <h3>Mid Left 15%</h3>
    <p>This layout has been tested in IE6, IE7, Firefox, Opera, Safari(PC) and Chrome all latest versions.</p>
    <p>All the colors are background color, so there is no need for background images to give the impression of full height columns.</p>
   </div> <!-- end content -->
   </div> <!-- end outer2 -->


   <div id="outer3">
   <div class="content">
    <h3>Mid Center 30%</h3>
    <p>This layout has been tested in IE6, IE7, Firefox, Opera, Safari(PC) and Chrome all latest versions.</p>
    <p>All the colors are background color, so there is no need for background images to give the impression of full height columns.</p>
    <p>All five columns will end at the footer.</p>
   </div> <!-- end content -->
   </div> <!-- end outer3 -->

   <div id="outer4">
   <div class="content">
    <h3>Mid Right 15%</h3>
    <p>This layout has been tested in IE6, IE7, Firefox, Opera, Safari(PC) and Chrome all latest versions.</p>
    <p>All the colors are background color, so there is no need for background images to give the impression of full height columns.</p>
    <p>All five columns will end at the footer.</p>
    <p>IE6 does require a couple of hacks to overcome its lack of min/max width and its rounding errors when using percentage values.</p>
   </div> <!-- end content -->
   </div> <!-- end outer4 -->


  </div><!-- end #wrapper -->

  <div id="footer">
   <div class="content">
   <p>Copyright &copy;2009 stu nicholls - #*$! | <a href="http://www.#*$!/comments/comments.php?comment_id=Flexible%20Layout" accesskey="C" title="Comments for this Layout">comments on this layout</a></p>
   <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <div>
     <input type="hidden" name="cmd" value="_s-xclick" />
     <input type="hidden" name="hosted_button_id" value="2928152" />
     <input type="image" src="http://www.#*$!/graphic/paypal.png" name="submit" alt="" />
     <img alt="" src="https://www.paypal.com/en_GB/i/scr/pixel.gif" width="1" height="1" />
    </div>
   </form>
   </div><!-- end content -->
  </div> <!-- end footer -->
</div><!-- end min max -->

</body>
</html>

SevenCubed

10:42 pm on Nov 3, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi Dmac, I'm new here myself but I guess I should do as the oldies do and welcome you to WebmasterWorld.

You have left out a key bit of info in spite of all the code. We don't know the width of your images or the browser and version it isn't working in. The issue you are presenting though is often related to overflow due to container size not being wide enough to hold the image. Those dimensions should be indicated in your html to help the browser load your pages faster too.

Major_Payne

12:45 am on Nov 4, 2010 (gmt 0)



You have a lot of floats. Floating removes that content from the normal document flow. If you do not allow space within the container where the floats are, if WILL mess your layout up. You must account for all widths/margins and padding value to ensure the floated content will behave as you wish.

I usually put temporary borders on all float containers to see where they are in relation to each other and their main container. I use different color borders at times. Once it all looks like I want, I remove the borders and tweak if needed.

Dmac

12:51 am on Nov 4, 2010 (gmt 0)

10+ Year Member



Hi Cubed,
I'm viewing it on IE7. The Div that contains all of these columns is styled #wrapper {overflow:hidden}. Perhaps that relates to your comment. The gallery is about 540px wide. Thumbnails are 75px square with 7px padding, and the full size pix are set at max 444px width. That's all in the styles above. Hope that helps. Let me know what you think.
Dmac

SevenCubed

1:43 am on Nov 4, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



What I really need to know is the dimensions of your actual images: simonh1.jpg, simonh2.jpg, simonh3.jpg, ...
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 3:36 pm May 1, 2026