Help hacking POSTBIT to center contact info?

[Rick Lee]

I have added custom fields into POSTBIT with long lengths and do not like the nowrap option in the POSTBIT. I would prefer the long fields to wrap. With the nowrap option the fields will left justify over to the avatar profile fields. Once the large field exceeds the ability to left justify it causes the POSTBIT to exceed the screen width.

I would like the custom fields to left justify to the avatar box and wrap.

Here is the screen shot with the custom fields wrapped and right justified:

Here is the code snip it from the POSTBIT template I would like to hack further.

How do I get the a large left justify box like the red outline in the image with the large fields wrapping.

             <td width="100%">&nbsp;</td>
            <td valign="top" >
                
                <div class="smallfont">
                    <if condition="$post['joindate']"><div>$vbphrase[join_date]: $post[joindate]</div></if>
                    <if condition="$post['field2']">
                                          <div>EMPLOYER: $post[field2]</div>
                                          <div>POSITION: $post[field1]</div>
                                          <div>CERTIFICATIONS: $post[field5]</div>
                                          <div>PRIMARY RESPONSIBILITIES:$post[field4]</div>
                                        </if>
                    <if condition="$post['age']"><div>$vbphrase[age]: $post[age]</div></if>
                    <div>
                        $vbphrase[posts]: $post[posts]
                    </div>
                    $template_hook[postbit_userinfo_left_after_posts]

______________________

Your help would be greatly appreciated.

Rick

[Princeton]

edit the width here

<td width="100%">&nbsp;</td>

[Rick Lee]

Princeton

Here is the revised code. The contact info fields are still forming in a small box on the right? Please see picture in original post.

<td width="100%">&nbsp;</td>
<td width="100%">&nbsp;

<div class="smallfont">
<if condition="$post['joindate']"><div>$vbphrase[join_date]: $post[joindate]</div></if>
<if condition="$post['field2']">
<div>EMPLOYER: $post[field2]</div>
<div>POSITION: $post[field1]</div>
<div>CERTIFICATIONS: $post[field5]</div>
<div>PRIMARY RESPONSIBILITIES:$post[field4]</div>
</if>
<if condition="$post['age']"><div>$vbphrase[age]: $post[age]</div></if>
<div>
$vbphrase[posts]: $post[posts]
</div>
$template_hook[postbit_userinfo_left_after_posts]
____________________
Thanks
Rick

[electrolov]

rick, the two 100% wont work.
-remove the 100% from <td width="100%">&nbsp;</td>, add to the next td
to understand, look at the whole nested table - then you will have td for avatar, td for name, td for space (nbsp), td for user info area
the last td, for user info area at 100% will fill to 100% of whatever is left over from the first three tds
that would be simplest way to do it.

-if that works, maybe try cleaning up your idea, (that is alot of info for that box and area, especially if your members responsibilities is long such as your example. you could move user name area info avatar box, or ontop of info area, also consider a vertical alignment of the avatar to balance the space.