OK, guys, here's a tricky one:
I have a layout based on negative margins [1]. It's fixed width, though.
Inside the main column (id="maincol") i would like to put some sort of a simple
gallery - a few thumbnails, each one with a one or two paragraphs of
description
on the right of each thumbnail.
So the basic xhtml/css is the following:
html:
<div class="galleryitem">
<h3>SECTION ONE</h3>
<div>
<p><a href="javascript:popImage('/zero-waste/gallery/image.jpg','')"><img
src="/zero-waste/gallery/image-thumbnail.jpg" alt="" /></a>Lorem ipsum dolor
sit
amet, consectetuer adipiscing elit. Nunc eu ligula mattis ipsum fringilla
tempor. (Some explanation text).</p>
<p class="source">Source: [ source of image here ]</p>
</div>
<div>
<p><a href="javascript:popImage('/zero-waste/gallery/image.jpg','')"><img
src="/zero-waste/gallery/image-thumbnail.jpg" alt="" /></a>Lorem ipsum dolor
sit
amet, consectetuer adipiscing elit. Nunc eu ligula mattis ipsum fringilla
tempor. (Some explanation text).</p>
<p class="source">Source: [ source of image here ]</p>
</div>
<!--/galleryitem--></div>
then comes css:
/* Photogallery page [camp_gallery.shtml] */
.galleryitem div {
background: url(../i/links-background.jpg) top left repeat-x;
color: #666;
margin: 10px 0;
padding: 10px 4px;
border: 1px solid #EEE;
display: table;
}
.galleryitem img {
float: left;
border: 1px solid #FFB17D;
margin: 0 4px 4px 0;
padding: 1px;
}
.galleryitem h3 {border-bottom: 1px solid #CCC;}
.galleryitem .source {font-style: italic;}
You can see the working example here:
http://bluelink.net/zero-waste/camp_gallery.shtml
I do not clear each floated thumb, instead, I've assigned to each DIV, which
contains the image and the text, the "display: table" property [2].
Which works fine in FF 1.5.0.1 and Opera 8.52.
But IE 6 does not read it, and displays the whole gallery in completely wrong
way. I guess, it does not support "display: table".
OK, what were my next moves?
I tried to clear each floated thumb, applying to each DIV, which contains an
image and one or two paragraphs of text, the property {clear: both}, but this
created layout problems, too, because the LEFT AND RIGHT COLUMNS were cleared,
too... So the whole layout broke:(
Next step was to add a clearing element right below each image and text in each
container.
Like this:
<div>
<p><a href="javascript:popImage('/zero-waste/gallery/image.jpg','')"><img
src="/zero-waste/gallery/image-thumbnail.jpg" alt="" /></a>Lorem ipsum dolor
sit
amet, consectetuer adipiscing elit. Nunc eu ligula mattis ipsum fringilla
tempor. (Some explanation text).</p>
<p class="source">Source: [ source of image here ]</p>
<div style="clear: left; height: 1px;"><!--this clears the float--></div>
</div>
In FF 1.5.0.1 this worked OK. But IE displayed BIG margin in the first DIV. So
this solution was dropped off, too.
I was almost desperate. Deadline is approaching, and I still can't figure out
what to do.
Then I remembered, that IF I ENCLOSE both floated image and text in a FLOATED
DIV, the DIV will be forced to CONTAIN the image and text, so no clear will be
needed!
Quick, I tested - yes! It worked, in FF and IE! But.. then, in Opera 8.5, I
discovered, that it breaks my current design :(
Finally, I even tried to create something like this:
Each DIV will have {clear: left} applied to it, so each of the DIVs will
subsequently auto-clear the image in the above DIV. So, I needed only the FIRST
DIV not to have {clear: left} applied to it, because ABOVE IT there was no
image!
So, I tried this one, too... and it didn't work as expected:(
* * *
So... After so many tries, I returned to my first example - the one with
{display: table} and...
...now I do not know what to try :(((
Each thumb will have different size (probably), and each paragraph will have
more or less text, so I can't fix the height of the containers, otherwise it
would be too easy.
How to clear EXACTLY the image above each of the DIVs, without BREAKING the
whole page layout (which relies on floats, too), and make it consistent across
all of the contemporary browsers?
I've given up, I thought it would be a piece of cake to accomplish, but now I
see I lack a lot of knowledge concerning floats...
I've read a lot about floats [3,4], but I somehow cannot apply the example to
the CURRENT SITUATION, when I have a 3-cols layout based on floats. I would
like
to avoid IE 6 hacks (if possible), but if there's no other solution, I would
include a hack for it. Only, I have to figure out somehow, how this will work...
Any help would be appreciated...
Thanks! :-)
Michel
----------------------------------------------------------------------------------
[1] http://www.alistapart.com/articles/negativemargins/
[2] http://veerle.duoh.com/index.php/blog/comments/displaytable/
[3] http://www.positioniseverything.net/easyclearing.html
[4] http://www.complexspiral.com/publications/containing-floats/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
