css: side-by-side "columns"

[bryndyment]

Hi,

I have X images in group A, and Y images in group B.  I want each group of images to be stacked vertically in its own column, and I want the two columns side-by-side.  In addition, I want the columns to be center-aligned vertically.  And, finally, an "OK" button in a third column, also center-aligned vertically.

So, for example:

A
A  B
A  B  (OK)
A  B
A

This is a learning exercise for CSS.  I don't want to use tables.

Attached is a screenshot of what I'm trying to build (ignore the nav links on the left).  The five large characters are in group A, and the six smaller characters are in group B.

Help!

[Spudhead]

Haven't tried it but I think this will work:

1 table holding everything. Has 3 td's - these are your columns. Each td has valign="middle" attribute. Acutally, that might work on its own, but you could also stick a table inside each of those td's with height="100%" and muck about with it that way.

Any help?

[bryndyment]

That would work, but, as I mentioned in my post, I'm looking for a solution that doesn't use tables.

[Spookster]

Use absolutely postioned div's. You can center align content within the divs. Use the absolute positioning to put them where you want.

[cg9com]

absolute positioning would work fine, but you dont need it.
3Col, try this. (http://cg9com.web1000.com/3col.html)

[bryndyment]

Thanks for the info so far. I have put up a page (http://www.hoologic.com/kanji/kanji.htm) which shows the horizontal equivalent of what I'm trying to do vertically.

(Using mod_perl/Mason for server-side.)

I have three DIVs (dotted border), and a fourth DIV (solid border) which acts as a bounding box. The height of the bounding box is fixed, so I can center the box vertically (using the negative margin technique). Note that the box stays centered when the window resizes.

Anyway, I will look into the advice given so far. Any elaboration would be appreciated... thanks!

[bryndyment]

Please check out http://www.hoologic.com/kanji/new.htm

As you can see, I'm almost there (using float). I "just" need to center vertically within the bounding DIV. Ideas?

Also, is <br> the best way for me to stack my images? Is this CSS-kosher? Is there a better way?

[Spookster]

http://www.w3schools.com/css/pr_pos_vertical-align.asp

[bryndyment]

I don't think vertical-align will work... I'm trying to vertically align a DIV within its bounding DIV.

vertical-align seems to only relate to aligning images relative to surrounding text, which doesn't apply here.

[Catman]

From what I can tell, vertical-align is supposed to apply to any inline element inside a block element, but after testing on several browsers, it seems to only work with images or in tables.

If you can set the containing div to a fixed size, you might be able to achieve the effect you're looking for by setting the top and bottom margins of the contained divs the same (e.g., both at 2em);

[bryndyment]

Solved via absolute positioning. Thanks a bunch for the suggestions. Learned a bunch. (I wish CSS made it easier to vertical-align stuff within DIVs, etc.)

[cg9com]

maybe im missing something.
you can adjust padding, and margins to position a div up in a corner.
if you wanted to make it lower, again padding or margins would work, or stacking other divisions on top correct?

[Terrapin]

glish (http://www.glish.com/css/) has some info that might be helpful, as well as the "holy grail" 3 column layout

[bryndyment]

I could have still used the "position: float" method, and padded above the DIV columns to get the vertical centering. But, in order to know the height of that padding, I need to know the height of the DIV (since the padding would be half the difference between the DIV height and its bounding box height).

But, in order to center vertically within the bounding DIV, I believe I need to know the height of the thing I'm trying to center*. And, in my example, I alread know the (fixed) width of my columns. So, since I know the width, and have calculated the height, of each column... I might as well use absolute positioning, right?

*I'm using the following style attributes to center my DIV vertically (given a DIV height of 64):

position: absolute;
top: 50%;
height: 64;
margin-top: -32;

---

Having three columns and centering them horizontally was easy, with cg9com's "float" suggestion. It was getting the vertical centering that required me to calculate the DIV height.