help managing / formatting paglines boxes

[danielfinn 1]

I am having trouble formatting an image and some text within a box. The sittuation is as follows. I have three boxes in a row and would like to place an image in each one. If I leave the box titles empty then all the image's tops align. When I enter a title into the first box the corresponding image moves down and the alignment gets messed up. Is their any HTML I can apply to the other two boxes to get their images to move down to the position of the first one. Or is their a title you can put in a box that doesn't show up, but the text formatting box titles exhibit is still applied. I have tried using combinations of

and

but it doesn't seem to prove very helpful. Unfortunately I have no URL to provide. But I have posted a screen shot. https://www.dropbox.com/s/tzk3kfk1oqw764x/Screen%20shot%202012-06-13%20at%2022.25.56.png

[danielfinn 1]

I have been experimenting with different solutions for this problem and I have come up with putting a pre-condition 'big' space in the second box before the image using the following html code:

This aligns the top of the second image to the that of the first (as outlined in the above URL). Is their an easier way to do this? Or is the work around I have come up with appropriate? I am quite new to HTML and just stumbled across the 'big' space thing.

[catrina 103]

If your workaround seems to work fine, you can stick with it. I can imagine other HTML workarounds for it being similar to the one you came up with. There wouldn't be a way to add titles in the other boxes and hide them using CSS because all of them use the same selectors.

[danielfinn 1]

Thanks. Also, how do I find out what the width is of a box column? I have three in a row and would like to create three different images to go in them, but I would like to know how big they should be.

[Rob 547]

The boxes are dynamic, so there's no specific width. It's a percentage, plus the fixed margins and padding. Using Firebug for Firefox, you should be able to see the padding/margins for the boxes. Multiply those numbers by six and add the content padding. Then, subtract that number from the total width of your Main Column as defined in the Layout Editor. The resulting number is divided by three to give you the actual size. However, I don't recommend creating images that go 100% of that size as different browsers will render those dynamic sizes in unique ways. If the image is deemed too wide by the browser, it will break.

[danielfinn 1]

Thanks. I just embedded an iframe that adapts to the box size, took a screen shot, copied it into photoshop and then measured the pixels.