How to make Boxes side by side

Discussion in 'HTML & Website Design' started by chrisj, Aug 29, 2007.

0
  1. #1
    I have this code, which I know could be improved, but that's not what I'm requesting, I'd just like to take what I have hear existing and get guidance on how to place the Promo2 box to the right (side by side)of the Promo1 box.

    I've also attached an image of what it looks like currently.

    Thanks.


    <table style="background-color:#ffffff; font-family:Arial, Helvetica, sans-serif; width:200%; height: 100%; "style=margin: 10px";>
<tr>

<td align="left" valign="top"><font face="Arial" color="#000000" size="4"><b>text text text text text text text </b><br><font face="Arial" color="#990000" size="4"><b>TEXT TEXT TEXT TEXT TEXT TEXT TEXT </b></font><br>      <font color="#FF9900">______________________________________________________</font><br><font face="Arial" color="#6B6B6B" size="3">Text Text Text text.<br><font face="Arial" color="#000000" size="3">TEXT TEXT TEXT TEXT TEXT <br>TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT 
 
<table id="promo" cellpadding="0" cellspacing="0">
      <tr>
        <td><h1>PROMO1</h1>
          <P>Company A: <BR>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</P></td>

      </tr>
    </table>
      <br>
      <table id="promo2" cellpadding="0" cellspacing="0">
        <tr>
          <td><h1>PROMO2</h1>
            <P>Company B: <BR>
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</P></td>
  
      </tr>
      </table>

TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT </font><br>

</td></tr>

</table>
    Code (markup):
     

    Attached Files:

    chrisj, Aug 29, 2007 IP
  2. twistedspikes

    twistedspikes Notable Member

    Messages:
    5,694
    Likes Received:
    293
    Best Answers:
    0
    Trophy Points:
    280
    #2
    get rid of the tables, replace with divs...thats my recomendation
     
    twistedspikes, Aug 29, 2007 IP
  3. Synchronium

    Synchronium Active Member

    Messages:
    463
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    58
    #3 
    
<table cellpadding="0" cellspacing="0">
      <tr>
        <td id="promo"><h1>PROMO1</h1>
          <P>Company A: <BR>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</P></td>
          <td id="promo2"><h1>PROMO2</h1>
            <P>Company B: <BR>
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</P></td>
      </tr>
      </table>
    Code (markup):
    Update your CSS so #promo and #promo2 refer to table cells (td) not the tables themselves.
     
    Synchronium, Aug 29, 2007 IP
  4. Giorgi

    Giorgi Well-Known Member

    Messages:
    234
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    110
    #4
    read about: NESTED DIVS
     
    Giorgi, Aug 29, 2007 IP
  5. PHPGator

    PHPGator Banned

    Messages:
    4,437
    Likes Received:
    133
    Best Answers:
    0
    Trophy Points:
    260
    #5
    Obviously you know that tables are kind of outdated but dont' want to make the switch. I can help you, but i'm al ittle lost with the code you offered. I can make the corrections for $10.00 if you give me access to the necessary files.

    This may work though:

    <table style="background-color:#ffffff; font-family:Arial, Helvetica, sans-serif; width:200%; height: 100%; "style=margin: 10px";>
<tr>

<td align="left" valign="top"><font face="Arial" color="#000000" size="4"><b>text text text text text text text </b><br><font face="Arial" color="#990000" size="4"><b>TEXT TEXT TEXT TEXT TEXT TEXT TEXT </b></font><br>      <font color="#FF9900">______________________________________________________</font><br><font face="Arial" color="#6B6B6B" size="3">Text Text Text text.<br><font face="Arial" color="#000000" size="3">TEXT TEXT TEXT TEXT TEXT <br>TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT 
 
<table border="0" cellpadding="0" cellspacing="0">
<tr><td>

      <table id="promo" cellpadding="0" cellspacing="0">
      <tr>
        <td><h1>PROMO1</h1>
          <P>Company A: <BR>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</P></td>

      </tr>
    </table>
</td><td>
      <table id="promo2" cellpadding="0" cellspacing="0">
        <tr>
          <td><h1>PROMO2</h1>
            <P>Company B: <BR>
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</P></td>
  
      </tr>
      </table>
</td></tr>
</table>

TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT </font><br>

</td></tr>
    Code (markup):
     
    PHPGator, Aug 29, 2007 IP