noob ???... 2 separate tables next to each other, why are they aligning to each other?!?

Permalink
I have a content block which contains 3 pictures and some text. Two pictures are short, one is tall. I want the two short pictures to be one above the other, and then next to that pair I want the tall picture, with the text right above it. So this is what tables are for, right? HTML for dummies, right?

I set this up as a 1-row, 2-column table, and then in each of those two columns I put a 2-row, 1-column table. So three tables total. Here is the html:

<table border="0" cellpadding="10">
  <tbody>
    <tr>
      <td><table style="width: 330px; height: 400px;" border="0">
          <tbody>
            <tr>
              <td><img src="/~dmchumanesociety//index.php/download_file/view_inline/25/" alt="dog_tennis.png" width="350" height="245" /></td>
            </tr>
            <tr>
              <td align="center"><img style="vertical-align: bottom; display: block; margin-left: auto; margin-right: auto;" src="/~dmchumanesociety//index.php/download_file/view_inline/23/" alt="kitty_peeking.jpg" width="206" height="127" /></td>
            </tr>
          </tbody>
      </table></td>
      <td valign="bottom"><table style="width: 230px; height: 400px;" border="0">
          <tbody>


When I'm in the Content editor of the Content block, it all lines up perfectly. (In the Dreamweaver design view, it also all lines up perfectly. That's what I used to produce the pretty indentation of the code...) Then I hit Save on the Content editor, and go back to the page and it's a disaster. Those two completely separate tables which are in the side-by-side td's of the outer table are aligning themselves along the bottoms of the top rows of the tables. I tried another variation, which was to make the table inside the right-hand cell of the outer table a 1-column, 1-row table with just the tall picture and deleted the row with the text. In that variation, the bottom of the cell on the right aligns with the bottom of the top cell in the table on the left, so the left picture sticks up way higher than the right pictures, and the right picture extends way lower.

Here is the web page:
http://cms.thehawkeye.com/~dmchumanesociety//index.php/adopt/...

This is a complete head scratcher to me, as I don't have much experience doing anything sophisticated with Concrete. I'm about to go lay it all out in photoshop and export a single image, but I'm still missing something pretty fundamental about how to embed dead-simple html into a concrete content block.

View Replies: View Best Answer
SheldonB replied on at Permalink Best Answer Reply
SheldonB
you have this in your main css vertical-align: baseline;

if your using chrome right click -> inspect elements and you can turn on and off css properties to see how it affects everything
thehawkeye replied on at Permalink Reply
THANK YOU!!!

For the solution to my immediate problem, a new debugging tool, and better understanding of how the control of the visual elements works in concrete!
SheldonB replied on at Permalink Reply
SheldonB
no problem i was asking confused questions just like you a few years ago and still do