Forum Moderators: not2easy
I have an image gallery that has images of variable sizes and includes text and a form on click with each image. The text and form are also variable in size. When some of the larger images are clicked on, the parent container(s) don't expand to accomodate the dynamic content inside the gallery div. It just overlaps and displays over the edge of the container.
I want all the divs centered on the page, except gallery which is to the left. I can post more, if needed.
Hopefully I am posting this in the correct way:
Sample of HTML code:
<div id="maincontainer">
<div id="centercolumn">
<div id="gallery"><b class="default"><img
src="images/babytitle.gif" title="" alt=""><span>Click
on the thumbnail image to select product and view larger image.</span></b>
<b class="switch"><img
style="width: 75px; height: 70px;"
src="images/Products/Baby/Pinkplate.jpg"
alt="Art of the Spirit Pink Ceramic Plate"> </b>
<div class="hide"><img
src="images/Products/Baby/Pinkplate.jpg" title="" alt="">
<p><b>Art of the Spirit Pink Ceramic Plate</b><br>
A wonderful and personal baby gift! A treasure to hang in her room.</p>
<form id="addToCartForm" method="post"
action="http://www.example.com/addtocart.sc"> <input
name="productId" value="4" type="hidden">
<table class="product-options-table" border="0">
<tbody>
<tr>
<td class="label"><em>Gift Wrap?</em> </td>
<td class="field">
<select>
<option value="No" selected="selected">No </option>
<option value="Yes">Yes </option>
</select>
</td>
</tr>
<tr class="buynow">
<td class="label"></td>
<td class="field"> <input value="Add To Cart"
class="btn" type="submit"></td>
</tr>
</tbody>
</table>
</form>
$58 </div>
</div>
</div>
Sample of CSS:
#gallery{
padding: 3px;
background: white none repeat scroll 0% 50%;
position: relative;
width: 245px;
height: 100%;}
#maincontainer{
border: thin solid black;
background: white url(images/blkwhitechk.gif) repeat scroll center top;
margin-left: auto;
margin-right: auto;
width: 800px;
float: none;
min-height: 500px;
display: table;
#centercolumn
{border: 1px solid black;
margin: 20px;
padding: 5px 0px;
background-color: white;
font-size: 18px;
color: #070707;
text-transform: none;
width: 760px;
float: none;
display: table;}
The "position: relative;" without any nudging might indicate you're trying to get this to work in IE? (position relative without "top, bottom, left and right" is supposed to have no effect at all in compliant browsers).
I'd strongly suggest to drop all IE only statements from the CSS till you get it working in the standards compliant ones. Once it works there, you can add what IE needs for specific versions in conditional comments without breaking it for the standards compliant browsers. And without giving it to IE8 which is promised to be compliant when released.
"background: white none repeat scroll 0% 50%;" What do you intend here ?
#maincontainer:
you have a syntax error there: it lacks a "}" near the end.
display: table; : that's not going to get you what you seek I'm afraid. What are you trying to achieve with that ? [display:table-* is poorly supported even if used appropriately]
Aside of that all: a div will only expand for content that is "in flow" inside it. Absolutely positioned, position:fixed, and floated content is removed from the flow and as such the parent block should collapse.
Try a simple html file with as little as possible in it. Give the blocks you keep a background-color to easily see where they sit. If you can't figure it out, post that simplified code.
I am trying to make it work on all browsers but have definitely had more issues with IE.
The position: relative is what makes the enlarged image display to the right of the thumbnail gallery which is on the left. If I take of position: relative it displays all over the screen. ? ? ?
"background: white none repeat scroll 0% 50%;" I think my CSS editor just left some old setting in there when I removed a background image?
#maincontainer - syntax error was just in the sample here - thank goodness!
maincontainer only functions as a background image holder so that centercolumn will have a black and white checked border. display: table was how I got that to work. When I remove it, the whole thing collapses and the thumbnail gallery is just sitting there on top. Not sure of the correct or preferred way to make this work.
g stu nicholls for lots of examples of simple ways to get this to work (Just be aware of the relevant copyright.)
