Centered Boxed-Grid within a fluid container?

[jason.moss]

Hello fine Web folk...

First post to this forum Actually, my first post to any web-dev forum.

I've beaten my head against the wall with this one, and this is not the first time I've encountered it. I've just always given up on it before.

Problem:

I have a grid of images inside of DL lists. These float left of each other, thus always horizontally filling in the available space. The problem, is, the outling container resizes (fluid) with the browser window, so when the available space is not quite the right size to fit another image, all images are left-aligned.

Question:

How do I have all the images, as a whole, always centered? ...hmmm.

======

You may view these screenies (1265px x 909px) to show you what I am trying to explain (sorry, can't use actual links):

The Problem

jdmlabs _dot_ com/_screenshits/jdmlabs/image_grid/jdmlabs_image-grid-BROKENalignment_screenie.png

The Fix

jdmlabs _dot_ com/_screenshits/jdmlabs/image_grid/jdmlabs_image-grid-FIXEDalignment_screenie.png


Example:

HTML Mark-up

          <div class="panel fl imagery">
            <h1>Random <span class="panel-divider-slanted">/</span> <a href="<?=$_SERVER["REQUEST_URI"];?>#" onclick="modal()" title=" View all Imagery entries ">Imagery</a></h1>
            <dl class="photo-entry">
              <dt><a rel="image" id="image_01" href="<?=$_SERVER["REQUEST_URI"];?>#" title=" Photo " ><img src="/wp-content/themes/Perseverance/assets/images/component/null_image_100x100.png" alt=" Photo " /></a></dt>
              <dd>Size: 1024 x 768</dd>
            </dl>
            <dl class="photo-entry">
              <dt><a rel="image" id="image_02" href="<?=$_SERVER["REQUEST_URI"];?>#" title=" Photo " ><img src="/wp-content/themes/Perseverance/assets/images/component/null_image_100x100.png" alt=" Photo " /></a></dt>
              <dd>Size: 1024 x 768</dd>
            </dl>
            <dl class="photo-entry">
              <dt><a rel="image" id="image_03" href="<?=$_SERVER["REQUEST_URI"];?>#" title=" Photo " ><img src="/wp-content/themes/Perseverance/assets/images/component/null_image_100x100.png" alt=" Photo " /></a></dt>
              <dd>Size: 1024 x 768</dd>
            </dl>
            <dl class="photo-entry">
              <dt><a rel="image" id="image_04" href="<?=$_SERVER["REQUEST_URI"];?>#" title=" Photo " ><img src="/wp-content/themes/Perseverance/assets/images/component/null_image_100x100.png" alt=" Photo " /></a></dt>
              <dd>Size: 1024 x 768</dd>
            </dl>
            <dl class="photo-entry">
              <dt><a rel="image" id="image_05" href="<?=$_SERVER["REQUEST_URI"];?>#" title=" Photo " ><img src="/wp-content/themes/Perseverance/assets/images/component/null_image_100x100.png" alt=" Photo " /></a></dt>
              <dd>Size: 1024 x 768</dd>
            </dl>
            <dl class="photo-entry">
              <dt><a rel="image" id="image_06" href="<?=$_SERVER["REQUEST_URI"];?>#" title=" Photo " ><img src="/wp-content/themes/Perseverance/assets/images/component/null_image_100x100.png" alt=" Photo " /></a></dt>
              <dd>Size: 1024 x 768</dd>
            </dl>
            <hr />
          </div>

CSS Mark-up

  .panel.imagery {
    display: block;
/*    float: left;		  Makes no difference  */
    margin: 0.8em 0.8em 0 0.2em;
    padding: 0 0.4em;
    border: 0.4em solid #222e36;
    background: #131c21;
/*    text-align: center;	  Makes no difference  */
  }
  #content_sub .panel.imagery h1 {
    margin-top: 1em;
  }
  #content_sub .photo-entry {
    display: inline;
    float: left;
    width: 116px;
    height: 110px;
    margin: 0.1em auto;
    padding: 0.7em 0 1em 0;
    text-align: center;
  }

[fredda]

Hi and welcome to the forums
If you give .panel.imagery a fixed width and then just use margin: 0 auto; to center it.

[jason.moss]

Hi and welcome to the forums
If you give .panel.imagery a fixed width and then just use margin: 0 auto; to center it.

I understand what you are saying. My main problem, though, is that I do not want .panel.imagery to be fixed-width. The whole site is a fluid width, using percentages, which works fantastically, except for that one centering issue.

Thank you for responding

[Erik J]

Took an experiment example of mine and applied to your code. Maybe you can use it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Centered Images With Caption in Fluid Box</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
body{
  background: #131c21;
}
.panel.imagery{
  margin:.8em .8em 0 .2em;
  padding:0 .4em 1em;
  border:.4em solid #222e36;
  width:50%;
}
.panel.imagery h1{
  margin:1em .5em .5em;
  padding:0 0 .5em 0;
  border-bottom:.2em solid #222e36;
  color: #fff;
  font-weight:400;
}
.panel.imagery h1 span{
  color:#666;
  font-weight:900;
}
.panel.imagery h1 a{
  color:#aaa;
  text-decoration:none;
}
.panel.imagery hr{               /* ruleset for consistent hr style */
  margin:1em; /* matching the h1 side-margins */
  border:0;                      /* for FF */
  border-top:.4em solid #222e36; /* for all except IE */
  height:.4em;                   /* for IE */
  background:transparent;        /* for Opera and Safari */
}
.photo-entry {
  position:relative;
  margin:0 20px;
  color:#fff;
  text-decoration:none;
  white-space:nowrap;
  font-size:90%;
  font-size:80%;
  font-size:70%;
  font-size:60%;
}
/************************ centering the inline images with one-line caption *******************/
.panel.imagery p{
  margin:0 0 .5em;
  padding:0;
   line-height:2.4em; /* gives "bottom margin" */
  text-align:center;
  word-spacing:-1.5em; /* diminishing the whitespace in line-wrap ends, in favor for IE */
}
.photo-entry span{
  margin:0 -3.5em; /* flexible length to balans the fix padding. Centers different font-sizes */
  padding:0 45px;
  word-spacing:1px;
}
.photo-entry img{
  margin-top:.8em;
  margin-right:-100px; /* pull in the caption line by the img length */
  border:0 none;
  width:100px;
  height:100px;
  vertical-align:1.2em; /* lift the img to give room for the caption line */
  white-space:nowrap;
}
</style></head><body>
 
<div class="panel fl imagery">
  <h1>Random <span class="panel-divider-slanted">/</span><a href="#nogo" onclick="modal()" title="View all Imagery entries"> Imagery</a></h1>
  <p>
    <a rel="image" id="image_01" class="photo-entry" href="#nogo" title="Photo"><img src="null_image_100x100.png" alt="Photo" /><span>Size: 1024 x 768</span></a>
    <a rel="image" id="image_02" class="photo-entry" href="#nogo" title="Photo"><img src="null_image_100x100.png" alt="Photo" /><span>Size: 1024 x 768</span></a>
    <a rel="image" id="image_03" class="photo-entry" href="#nogo" title="Photo"><img src="null_image_100x100.png" alt="Photo" /><span>Size: 1024 x 768</span></a>
    <a rel="image" id="image_04" class="photo-entry" href="#nogo" title="Photo"><img src="null_image_100x100.png" alt="Photo" /><span>Size: 1024 x 768</span></a>
    <a rel="image" id="image_05" class="photo-entry" href="#nogo" title="Photo"><img src="null_image_100x100.png" alt="Photo" /><span>Size: 1024 x 768</span></a>
    <a rel="image" id="image_06" class="photo-entry" href="#nogo" title="Photo"><img src="null_image_100x100.png" alt="Photo" /><span>Size: 1024 x 768</span></a>
  </p>
  <hr />
</div>
 
</body></html>

[jason.moss]

Took an experiment example of mine and applied to your code. Maybe you can use it.

...

Hello erik.j,

Thank you for your reply. I copied your example to a file and tested it ...and it worked perfectly! You're a genius. I will try it in my site layout in a bit.

Again, thank you very much. I will re-post, if and/or when, I get the issue resolved.

Jason

[jason.moss]

Found a solution, sort of...

The solution was actually much easier than I had thought, as is usually the case.

My entire site is fluid, and the image containers (DL) inside it's outside container (DIV .panel) were fixed.
So if I make the DLs fluid (@ 31%), they always fill the the extra space. The way the site is designed, they will never be more than three images across.

Not exactly centered, I know, but with a little left padding, it will be close enough for me

See this image for clarification:

www _dot_ jdmlabs _dot_ com/_screenshits/jdmlabs/image_grid/jdmlabs_image_grid_comparison.png

A big thanks to fredda and eric j. for your help.

Jason