Re: [WSG] vertically aligning objects of unknown height

[James Gollan]

.container {
display:block;
position:relative;
}
.checkbox {
position:absolute;
top:45%;
}
.box {
background-color:#00CCFF;
width:620px;
margin-left:21px;
}

something like this


On 3/29/07, Designer <[EMAIL PROTECTED]> wrote:

Andreas Boehmer [Addictive Media] wrote:
> Hi guys,
>
> Is there any way to vertically align objects in CSS next to each other
if
> the height of them is not set?
>
> This is what I am trying to achieve:
>
> http://www.prototype.net.au/boxes.html
>
> I want to create a box with an undefined amount of text inside of it and
> next to the box I want a checkbox. But the checkbox should be vertically
> centered.
>
> I tried putting them both into a container that has got display set to
> table-cell and then turn on vertical-align:middle, but this only works
if I
> know the height of the container. And even then will the checkbox and
the
> text box align in the middle of the container, but still be aligned next
to
> each other.
>
> I wonder if anybody found a solution for this problem?
>
> Cheers,
>
> Andreas
>

With forms, many folk resort to being 'naughty' and use:

<table class="container">
   <tr>
     <td class="checkbox">
                <input type="checkbox">
     </td>
     <td class="box">
       Lorem ipsum dolor sit amet<br>
       Lorem ipsum dolor sit amet<br>
       Lorem ipsum dolor sit amet<br>
       Lorem ipsum dolor sit amet<br>
       Lorem ipsum dolor sit amet<br>
     </td>
   </tr>
   <tr>
     <td class="checkbox">
                <input type="checkbox">
     </td>
     <td class="box">
          Lorem ipsum dolor sit amet<br>
       Lorem ipsum dolor sit amet<br>
       Lorem ipsum dolor sit amet<br>
       Lorem ipsum dolor sit amet<br>
       Lorem ipsum dolor sit amet<br>
     </td>
   </tr>
</table>

It's cross browser, safe, and sturdy . . . :-)

--
Bob

www.gwelanmor-internet.co.uk



*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************

*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************