Need Help Correcting Alignment of Text and Pictures

[pbizz1170]

I am working on a website and I have pictures on it with text below. It is centering all four above each other on the page. I am looking to have a set of two above the other two so they are set up like 4 corners to each other. Here is the code so far

<p>
<center><a href="Beta.html"><img src="../IMG_0594.gif" alt="Picture 1 Home" width="150" height="113"><div class="imgText" style="width:150px">Beta Building</div></a><a href="Delta.html"><img src="../IMG_0596.gif" alt="Picture 2 Home" width="150" height="113"><div class="imgText" style="width:150px">Delta Building</div></a><a href="Gamma.html"><img src="../IMG_0603.gif" alt="Picture 3 Home" width="150" height="113"><div class="imgText" style="width:150px">Gamma Building</div></a><a href="Date Stone.JPG" target="_blank"><img src="../Date Stone.gif" alt="Home Picture 4" width="150" height="113"><div class="imgText" style="width:150px">Gamma Building Stone. Founded 1820</div></a></center>

the website is www.pinecreekcrossing.com.... If you take a look you will see what I mean on the home page.

Thank You for the help

[mikewgd]

You should really consider using <div>s, but anyway what are you using to code this? There is some unnecessary tagging going on. Are you doing tables? If so you can just put the pictures in columns

<table width="100" border="0" cellspacing="12" cellpadding="0">
  <tr>
    <td valign="top" align="center"><a href="Beta.html"><img src="../IMG_0594.gif" alt="Picture 1 Home" width="150" height="113"><div class="imgText" style="width:150px">Beta Building</div></a></td>
    <td valign="top" align="center"><a href="Delta.html"><img src="../IMG_0596.gif" alt="Picture 2 Home" width="150" height="113"><div class="imgText" style="width:150px">Delta Building</div></a></td>
  </tr>
  <tr>
    <td valign="top" align="center"><a href="Gamma.html"><img src="../IMG_0603.gif" alt="Picture 3 Home" width="150" height="113"><div class="imgText" style="width:150px">Gamma Building</div></a></td>
    <td valign="top" align="center"><a href="Date Stone.JPG" target="_blank"><img src="../Date Stone.gif" alt="Home Picture 4" width="150" height="113"><div class="imgText" style="width:150px">Gamma Building Stone. Founded 1820</div></a></td>
  </tr>
</table>

[pbizz1170]

You should really consider using <div>s, but anyway what are you using to code this? There is some unnecessary tagging going on. Are you doing tables? If so you can just put the pictures in columns

<table width="100" border="0" cellspacing="12" cellpadding="0">
  <tr>
    <td valign="top" align="center"><a href="Beta.html"><img src="../IMG_0594.gif" alt="Picture 1 Home" width="150" height="113"><div class="imgText" style="width:150px">Beta Building</div></a></td>
    <td valign="top" align="center"><a href="Delta.html"><img src="../IMG_0596.gif" alt="Picture 2 Home" width="150" height="113"><div class="imgText" style="width:150px">Delta Building</div></a></td>
  </tr>
  <tr>
    <td valign="top" align="center"><a href="Gamma.html"><img src="../IMG_0603.gif" alt="Picture 3 Home" width="150" height="113"><div class="imgText" style="width:150px">Gamma Building</div></a></td>
    <td valign="top" align="center"><a href="Date Stone.JPG" target="_blank"><img src="../Date Stone.gif" alt="Home Picture 4" width="150" height="113"><div class="imgText" style="width:150px">Gamma Building Stone. Founded 1820</div></a></td>
  </tr>
</table>

I am using Dreamweaver CS5. and correct me if I am wrong, but I am using <div>s... Am I using them wrong? I was trying to stay away from tables.

[mikewgd]

Oh, ok. Im just noticing <table> in your source code and a lot of these <p class="MsoNormal"> and empty <p>. Sorry don't mean to "critique" your site. I would just put those in <div> tags. I could come up with something if you would like.

[pbizz1170]

Oh, ok. Im just noticing <table> in your source code and a lot of these <p class="MsoNormal"> and empty <p>. Sorry don't mean to "critique" your site. I would just put those in <div> tags. I could come up with something if you would like.

Yea I took over this project from someone else. I could use all the help I could get. Thanks.

[mikewgd]

Well I would do this:

<a href="#" class="logo"><logo image></a>
<div id="contents">
    <div id="sidebar">
        -- Have your navigation in there (make unordered list)
        -- Map stuff
    </div>
    <div id="content">
        -- All of your content here text should be wrapped in <p>
        -- For your images with text I would add a div called 4col or something and then   
            have stuff aligned
    </div>
</div>
<p id="footer">Footer text</p>

I would probably do something along those lines.