[Typo3] align middle and right columns

[Christopher]

Hi,

On 10/08/05, Christoph Koehler <christoph.koehler at gmail.com> wrote:
> >> -------------------------+----------------+
> >> Product 1                | Logo Product 1 |
> >> - ...                    |                |
> >> - ...                    |                |
> >> - ...                    |                |
> >> - ...                    |                |
> >> - ...                    |                |
> >>                          |                |
> >> Product 2                | Logo Product 2 |
> >> [...]                    |                |
> >> -------------------------+----------------+
> 
> > Sounds like a css question, but I can't understand the result you're
> > trying to achieve. Can you post a screenshot somewhere?
> 
> I think he wants the Logo Product 1 lined up with Product 1 in the other
> column, and Logo P 2 with P 2 ,even though there might be stuff between
> Product 1 and 2. Right now I believe it will more look like this:
> 
> 
> >> -------------------------+----------------+
> >> Product 1                | Logo Product 1 |
> >> - ...                    | Logo Product 2 |
> >> - ...                    |                |
> >> - ...                    |                |
> >> - ...                    |                |
> >> - ...                    |                |
> >>                          |                |
> >> Product 2                |                |
> >> [...]                    |                |
> >> -------------------------+----------------+
> 
> I don't know if there is a way with just CSS, you might have to have some
> function that figures out how much space you need between the two logos
> and add a spacer class like .spacer { height: Xpx;} or add a margin to the
> div that contains your logo.
> How about using TV with flexible content elements, and make a table with
> two columns and map the content accordingly. Would that be possible?
> 


Ok, if Christoph is right about what's needed, then I _might_ say that
a table with multiple rows is actually what's required, although it
can _probably_ be done with css without using the table (keeping in
mind that, as far as has been revealed in the thread here, there's
nothing but a logo in the right column, though that wouldn't be a
major inconvenience...):

HTML (all sizes arbitrary):
=====
<div style="width:300px" title="Just a container">
  <div class="productContainer">
    <div class="product">
    	Lorem ipsum dolor sit amet consectetuer.
    </div>
    <img src="path/to/logo.gif" with="100" height="100" alt="Logo image" />
  </div>
  
  <div class="productContainer">
    <div class="product">
    	Lorem ipsum dolor sit amet consectetuer.
    </div>
    <img src="path/to/logo.gif" with="100" height="100" alt="Logo image" />
  </div>
</div>

CSS (all colours garish):
=====
.productContainer {
	float:left;
	position:relative;
	width:300px;
	background:#f90;
	margin-bottom:10px;
}

.product {
	float:left;
	width:150px;
	background:#f60;
}

.productContainer img {
	display:block;
	float:right;
	width:100px;
	height:100px;
	background:#fc0;
}


However, if even that's not appropriate to the situation then a little
js can probably do the job (though you'll have to make up your mind
about whether you can trust something as important as layout to
javascript...). What you need to do is this:

1. Get the height of the 'product1' container (I'll call it #product1)
2. Get the height of the 'product1' logo or logo container (I'll call
it #product1logo)
3. Dynamically add _something_ (maybe padding) to the bottom of
#product1logo or to the top of #product2logo to space it out
correctly.
4. Do the whole process on page load.

function positionLogoImage() {
	// Get the product1 object:
	var product1 = document.getElementById('product1');

	// Then get its height:
	var product1Height = product1.offsetHeight;

	// Then get the height of the corresponding logo:
	var product1LogoHeight = document.getElementById('product1Logo').offsetHeight;

	// Figure out the difference in sizes:
	var heightDifference = (product1Height - product1LogoHeight);
	
	// Then add some bottom padding to the logo / logo container (in the
form '20px'):
	product1Logo.style.paddingBottom = heightDifference + 'px';
}

This should work (a variant is working in production in a different
situation already) unless I've messed something up in making it
generic in a hurry :)


-Christopher