Home/ Questions/Q 7438343
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T10:32:24+00:00

That might sound silly but can’t do it myself :( Need your help guys.

  • 0

That might sound silly but can’t do it myself 🙁
Need your help guys.
How do I active the mark up from bellow but using DIVs (+CSS) instead of TABLE?

    <table>
    <tr>
        <td>
            <img src="logo_left.gif" />
        </td>
        <td align="center">
            <p><strong>THE TITLE!!!</strong></p>
        </td>
        <td>
            <img src="logo_right.gif" />
        </td>
    </tr>
  </table>

Thanks in advance!

As some are asking I’m posting what I’ve tried so far…
CSS

   <style type="text/css">        
      .header 
      {
        border: 1px solid black;
        border-bottom-width: 0px;
        background-image: url("Images/spriterepeatx.png"); 
        background-position: 0 -85px !important; 
        background-repeat: repeat-x; 
        background-color: transparent;
        height: 76px;
        font-family: Arial,Helvetica,sans-serif;
      }
     .LeftLogo a 
     {
        display: inline;
        float:left; 
        height:25px; 
        margin: 25px 0 25px 25px; 
        position:relative; 
        width:227px;
        background: url("Images/left_logo.gif") no-repeat scroll 0 0 transparent;
     }
     .RightLogo
     {
        width:100px;
        height:100px;
        background: url("Images/right_logo.png") no-repeat scroll 0 0 transparent;
     }         
     p.promo {
      font-size: 150% !important;
      line-height: 22px;
      margin-top: 25px;
      text-align: center;
      white-space:nowrap;
    }

</style>

HTML:

<body> <div class='header'>
  <div class="LeftLogo"><a title="My company logo" href="http://www.mycompany.com"></a></div>
  <div><p class="promo"><strong>MYProduct</strong> - Superb product</p></div>
  <div class="RightLogo"></div> </div> </body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First of all you start off by giving a display: inline style for your divs, because by default it is a “block”, then you can position each of the div’s as required.

    A “block” div occupies the entire horizontal space, but with “inline” you can specify the space it needs to occupy. No give widths which can in “px” or “percentages” and the limit depends on your creativity.

    Your above code in div’s would be something like below:

    <div class="divcolumn">
    <img src="logo_left.gif" />
</div>

<div class="divcolumn" style="text-align:center">
   <p><strong>The Title!!!</strong></p>
</div>

<div class="divcolumn">
    <img src="logo_right.gif" />
</div>

    Now specify style like this:

    .divcolumn { 
    display: inline;
}

    You can even write a separate style for each column like “divcolumn-right”, “divcolumn-center” and “divcolumn-left” and specify different styles. For example getting liquid layout specify width’s like “30%”, “40%” and “30%” in each of those styles respectively.

    • 0