Jump to content


Photo

Table Column verticle Alignment


This topic has been archived. This means that you cannot reply to this topic.
2 replies to this topic

#1 tsilloh

tsilloh

    Advanced Member

  • Members
  • PipPipPip
  • 43 posts

Posted 13 August 2012 - 06:57 PM

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.co...t/agentaid.html and the three-column page can be seen at http://www.dxninc.co.../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?

#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts

Posted 13 August 2012 - 09:25 PM

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

#3 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts

Posted 18 August 2012 - 02:47 PM

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.pageline...framework/tools), so that your site is accessible to everyone. As it stands now, folks on mobile cannot view your site properly. Nick