Hi,

Hope you can help.

First I tried to place 4 div side by side (each div holds a photo) inside a container div. No success. For the sake of simplicity in describing my challenge, I’ll refer to each of the 4 div as photos.

Then I placed 2 photos inside a container div, 2 photos inside another container div and both div with the photos inside a master container div. So I’ve ended up with 4 photos (2 div + 2 div) side by side.

My overall aim is to:
A) have the photos line up attractively in various screen sizes (eg: 1024 by 768; 1280 by 720; 1280 by 768; 1280 by 800)
B) have no horizontal scrollbars if a viewer has a 1024 by 768 screen size

The challenge:
To center the photos so that the distance between the sidebars and the left and right hand side photos remain the same in various screen sizes.

The problem with position: absolute is that the sidebars cover the photos when the window is resized with the mouse. Any ideas will be appreciated.

PS. Finding your site has been a big help; I’ve discovered a lot about CSS since I discovered it.



The HTML code:
<div id="main">
<div id="content">


<div id="bothgalleryboxes">
<div id="leftgallerybox">
<div id="leftgallery1">
<a target="_blank" href="image Test 2.html"><img style="height: 150px;
width: 150px" src="Copy_Sample_Pic_01.JPEG" alt="image" /></a>
<br /><h3><a target="_blank" href="image Test 2.html">Image</a></h3>
</div>
<div id="rightgallery1">
<a target="_blank" href="image Test 2.html"><img style="height: 150px;
width: 150px" src="Copy_sample_Pic_002.JPEG" alt="image" /></a>
<br /><h3><a target="_blank" href="image Test 2.html">Image Caption</a></h3>
</div>
</div><!...leftgallerybox...>

<div id=”rightgallerybox>
<div id="leftgallery2">
<a target="_blank" href="image Test 2.html"><img style="height: 150px;
width: 150px" src="Copy_Sample_Pic_01.JPEG" alt="image" /></a>
<br /><h3><a target="_blank" href="image Test2.html">Image Caption</a></h3>
</div>
<div id="rightgallery2">
<a target="_blank" href="image Test 2.html"><img style="height: 150px;
width: 150px" src="Copy_sample_Pic_002.JPEG" alt="image" /></a>
<br /><h3><a target="_blank" href="image Test 2.html">Image Caption</a></h3>
</div>
</div><!...rightgallerybox...>
</div><!...bothgalleryboxes...>

<div id="leftsidebar">
<ul id="decoration">
<li> <a target="_blank" href="Link here.html">Click</a></li>
<li> <a target="_blank" href="I Link here.html">Click</a></li>
<li> <a target="_blank" href=" Link here.html">Click</a></li>
<li> <a target="_blank" href=" Link here.html">Click</a></li>
<li> <a target="_blank" href=" Link here.html">Click</a></li>
<li id=sidebar>Label</li>
<li> <a target="_blank" href=" Link here.html">Click</a></li>
<li> <a target="_blank" href=" Link here.html">Click</a></li>
<li> <a target="_blank" href=" Link here.html">Click</a></li>
<li> <a target="_blank" href=" Link here.html">Click</a></li>
<li id="bordercontact"> <a target="_blank" href=" Link here.html">Click</a></li>
</ul>
</div>

<div id="rightsidebar">
words
</div><!...rightsidebar>

</div><!...leftsidebar...>
</div><!...content...>
</div><!...main>

The CSS Code:

#main
{position: relative; top:0; left: 0; width: 100%; margin-top: 10px; margin-top: 10px; }
#content
{margin: 0 240px 160px; border: 1px solid black; background-color: white; color: black;}



#bothgalleryboxes
{right:0; border: 3px solid blue; width: 100%; background-color: lightyellow; margin-top: 10px; padding: 0; }


#leftgallerybox
{margin: 0 0 0 20px; float: left; border: 1px solid green; width: 340px; background-color: lightyellow; margin-top: 10px; padding: 0;}
#leftgallery1
{width: 170px; top: 0; float: left; text-align: center; line-height: 25px; background-color: lightyellow; padding: 0 }
#leftgallery1 a
{text-decoration: none; }
#leftgallery1 h3 a:hover
{font-size: x-large; text-decoration: none; background-color: yellow;}
#rightgallery1
{ float: right; top: 0; width: 170px; text-align: center; center; padding: 0 0 0 0px; line-height: 25px; background-color: lightyellow; padding: 0 }
#rightgallery1 a
{text-decoration: none}
#rightgallery1 h3 a:hover
{font-size: x-large; background-color: yellow; }

#rightgallerybox
{margin: 0 0 0 20px; float: left; border: 1px solid green; width: 340px; background-color: lightyellow; margin-top: 10px; padding: 0; }
#rleftgallery1
{ float: left; top: 0; width: 170px; text-align: center; center; padding: 0 0 0 0px; line-height: 25px; background-color: lightyellow; padding: 0 }
#leftgallery1 a
{text-decoration: none}
#leftgallery1 h3 a:hover
{font-size: x-large; background-color: yellow; }
#rightgallery2
{ float: right; top: 0; width: 170px; text-align: center; center; padding: 0 0 0 0px; line-height: 25px; background-color: lightyellow; padding: 0 }
#rightgallery2 a
{text-decoration: none}
#rightgallery2 h3 a:hover
{font-size: x-large; background-color: yellow; }

#leftsidebar
{position: absolute; top: 0; left: 0; width: 189px; margin: 0; padding: 0; border: 1px solid blue; }


#decoration
{text-decoration: none; margin: 0; padding: 0 0 0 0; background-color: #6F6146; list-style-type: none; }
#sidebar
{text-align: center; color: black; background-color: khaki; line-height: 2.5; font-family: courier new, trebuchet, sans-serif; }
#decoration li
{margin: 0; padding: 0; width: 100%; }
#decoration a
{ display: block; /* to increase clickable area as a's default to inline*/ color: #FFF; line-height: 2.5; text-decoration: none; padding: 0; border-bottom: 1px solid #FFF; height: 1%}
#decoration li a:hover
{background-color: #4F4532; }

#rightsidebar
{position: absolute; top: 0; right: 0px; width: 320px; margin: 0; padding: 0; border: 1px solid black;}

To center the photos so that the distance between the sidebars and the left and right hand side photos remain the same in various screen sizes.

This is only going to work as long as your total widths of the photos and the spacing between them does not exceed 1000px, otherwise you're likely to get a horizontal scrollbar. You MUST allow room for the vertical scrollbar which is about 20-22px wide.

You need to FLOAT the photos inside their container div. Set the margins on the container div to margin: 0 auto; so that it stays centered regardless of the screen's width. Then you'll need to use margins and/or padding to keep the spaces between the photos uniform.

You might want to read this article which is pretty close to what you want to do.
http://realworldstyle.com/thumb_float.html
Here's a couple more: http://www.alistapart.com/articles/practicalcss/
And this one is scaleable: http://accessat.c-net.us/test/gallery.html

The problem with position: absolute is that the sidebars cover the photos when the window is resized with the mouse. Any ideas will be appreciated.

The LAST thing you want to use is absolute positioning for this type of application.

dude, code tags. Thank God Ladyn covered that one. .

Great work again .

Ladynred,

You're fantastic!!! You really are. Your suggestion using margin: 0 auto worked. And you answered the total width in pixels that was on my mind.

I've also read the articles you suggested; I found the code in 'Real World Style Floating Thumbnails' easier to understand than the Scalable-CSS Thumbnail Gallery. But that reflects the distance I've yet to travel in my skill set.

Thanks a bunch.

now check Internet Explorer.

Andrei155,

Thanks for taking the time to look at my need for help. Much appreciated.

I reduced the gallery to 3 photos so they fitted within the suggested 1000px range; it works in IE6 and FF.

But after reading the articles put forward by Ladynred, I'm fully aware my code is rather inellegant. However I'm willing to learn and with time my skill set should (hopefully) improve.

However I'm willing to learn and with time my skill set should (hopefully) improve.

Good for you !!!! A willingness to learn is the right direction for growth .

Good for you !!!! A willingness to learn is the right direction for growth .

You have to love learning in this field, because you need to continue to educate yourself no matter what your skill level is. Never stop learning.

Thanks Ladynred and wayfarer07; it's a very steep learning curve I'm on and I'm enjoying it throughly.