I’m creating a layout with 3 equal-width columns which seems to be fine till I add an image in the middle column. Then the text in the outer columns begins at the bottom of the image.
It’s presumably a vertical alignment issue but I cannot seem to find a decent reference site for CSS columns.
My mockup site is at http://webdesignpaciano.com/g2p/test-page.php
That’s it, you need to adjust the vertical-align to top or something. It defaults to baseline, so the first line of text is at the base level of the image.
Yey. Thanks @SamA74
With images being inline, they are treated just like a large text character. The same happens if the tables are turned (no pun…) and the text is big and the image is small. All first lines sit on the same baseline.
The vertical-align property applies to table-cells and table-cell elements (or elements with a display of table-cell) and inline elements only. The initial value of vertical-align is baseline which is why when you use css tables the alignment is baseline and you need to set it most likely to top (or middle if you want vertical centring).
When you use html tables the vertical-align for a td element is generally set by the UA to middle (or to inherit middle from the tbody) which is why you don’t get the baseline stacking by default on html tables.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.