Archived

This topic is now archived and is closed to further replies.

  • 0

Table Column verticle Alignment

Question

Posted · Report post

I am running WordPress 3.4.1 with the WhiteHousePro3 template. I had a friend write some html code for two pages in my website. One page utilizes a two column table and the other a three column table. The two-column page can be seen at http://www.dxninc.com/pen/content/agentaid.html and the three-column page can be seen at http://www.dxninc.com/pen/content/tutorial.html. When I add the images to the Media Library and copy the html code (including style definition) into a Full Width Page with Allow Comments not checked, the verticle alignment of the columns is not correct. The vertical alignment of the first column image in the two-column page appears to be correct. The verticle alignment of the text in the second column begins below the image on the left even though valign="top". It is almost as if the image takes the full width of the page even though it is sized for just the space it should occupy and the text of the second column is forced to move to the next available space below. The verticle alignment of the middle column image in the three-column page appears to be correct. The verticle alignment of the text in the first (left) column and in the third (right) column begins below the image in the second (middle) column even though valign="top". The image in the middle column appears to take the full width of the page even though it is sized for just the space it should occupy and the text of the first and third columns is forced to move to the next available space below. As you can see from the examples, the html code correctly positions both the image and the text when it is not running under WordPress and WhiteHousePro3. Is there something I must set in WordPress or WhiteHousePro3 to allow the text columns to move up in relation to the image columns?

1 person likes this

Share this post


Link to post
Share on other sites

2 answers to this question

Posted · Report post

You need

vertical-align: top;

and not valign="top"; as that doesn't really work well anymore. Visit http://www.w3schools.com/css/css_table.asp and you will find great info for styling tables.

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Your friend is using tables, something that's 100 years old and extremely out of date for html markup. I'd highly recommend using real HTML markup, using our grid (http://demo.pagelines.com/framework/tools), so that your site is accessible to everyone. As it stands now, folks on mobile cannot view your site properly. Nick

1 person likes this

Share this post


Link to post
Share on other sites