Topic on Project:Support desk

really helpful contributions from both Jonathan3 and Bawolff. The secret is to add to the end of the "float:left" parameter the following: margin-top:0px.

Thank you both so much.

ElectricRay (talk) 17:34, 14 January 2020 (UTC)

Hi - I am having trouble aligning tables with surrounding text. When I use a right-aligned table, or a left-aligned table, it positions the table about half a line lower than the text. Oddly, a center-aligned table sits a bit higher.

I can't for the life of me figure out how to control the vertical alignment of the table against the text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Any help gratefully received.

thanks ElectricRay (talk) 14:27, 13 January 2020 (UTC)

see how the box is sitting a bit low?

I've not looked into this in detail but it looks like the wikitable class has margin-top:1em which works out as 14px. You could maybe change this.

E.g.

I can't for the life of me figure out how to control the vertical alignment of the table against the text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Any help gratefully received.

Crikey that was easy!!! thanks so much this is exactly what I was trying to achieve. And I just discovered you can go negative on that margin:top parameter. ElectricRay (talk) 17:03, 14 January 2020 (UTC)

if you just want a callout box (and not a table) you probably want to use a div with float:left instead

e.g.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Which is done using <div style="border:#c8ccd1 solid 1px; width:45%;background: #f8f9fa;float:left;padding:5px;margin:5px">...</div>

although the div lining up is probably more about the 5px margin, than actually lining up.

The other way, is to put the entire thing in a two column table, and then use the vertical-align css property, but its hard to get that to do what you want.