[Typo3] align middle and right columns

[Felix Natter]

Christopher <bedlamhotel at gmail.com> writes:

> 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 :)

thank you both!

-- 
Felix Natter