Add layout -> act like a table

I made a layout (click container-> add layout) with 2 columns.
These columns act independently in height.
I would like them to act like a table where I put one picture (clickable with "fancy image links") in left and text in right (personnel info).
I tried to set the height of the right container to the same as the picture, but there is a spacing between the WYSIWYG containers that I can't get rid off. So everything in the right side is pushed down along the page the more containers you add.

Anyone have a solution or tip?

View Replies: View Best Answer
shondy replied on at Permalink Best Answer Reply
The spacing between columns is probably a style setting may or may not be easily changed without affecting other layouts.

Adding a specified height to a container is usually not a good idea, because it can interrupt the normal document flow if the width of the container changes or the content is scaled. Also, (at least currently or until 5.7 comes out) layouts do not work with responsive sites, so that adds another wrinkle to things.

Why not just use a table then? What you are creating is essentially tabular data, and by using a table this way, it certainly doesn't break any rules. And in reality, if you set the width of the table and cells to a percentage it will grow and shrink with a responsive layout.

Sometimes keeping it simple is the best answer. There are probably a dozen ways to CSS this up to make it work, but to what end?

There is a free add-on which I found extremely useful which will also aid in setting up this type of layout (without using layouts):

You can really do any layout and then be able to repeat it easily with this. I used it on a party rental site, and it worked wonders. The setup takes some time, but once you have it locked down, you are good to go.
Erik74 replied on at Permalink Reply
Yeah I was thinking of Designer content, I have worked with it on other projects about 2-3 years ago.

I just got stuck in the idea of make it work this way since I wanted a click-able picture to a bigger version in fancybox window.
But perhaps I should read up on the DC again.

Thanks for your reply and input in the mater!
PineCreativeLabs replied on at Permalink Reply
There are a couple of handy jquery scripts that you could use that will help with this.

Match Height:


Responsive Height:

Hope that helps.
Erik74 replied on at Permalink Reply
Hi growthcurve.
Is the idea to use this on the design from concerete that I have today?
PatrickCassidy replied on at Permalink Reply
Yeah, I've done something like this before.

You can do it by adding ordinary content block, then adding a table, and styling the css of the table to suit by assigning the table a class.

Then just click in each cell and add images and links etc as you would normally do it in TinyMCE...
Erik74 replied on at Permalink Reply
I ended up with Designer Content and made a new block, included my own version of fancybox and everything came out the way I wanted.

The only thing that would have been nice would been to be able to choose one small and one big image without making a thumb on-the-fly.