Question

I have this nightmare of code,

 <div style="height:46px;">
    <div style="text-align:left;float:left;">
      <img alt="Document Logo" src="Images/img1.gif"></img>
    </div>
    <div style="text-align:left;float:left;margin-top:5px;margin-left:13px;">
      <font size="4">
        <b>title (needs to be align to the left,next to img1)</b>
      </font>
    </div>
    <div style="text-align:right;float:right;vertical-align:top;">
      <img alt="Logo" src="Images/img.jpg"/>
    </div>
   </div>

img1 and title needs to be align to the left and img2 needs to be align to the right, but when I resize window img2 goes under title.

I need them all to remain in one line.

Can anybody give a hand?

Thanks in advance.

Answer 1

Another solution is to use absolute positioning instead of floats. Like so:

<div style="position:relative; height:46px;">
    <div style="position:absolute; top:0; left:0; width:50px">
        <img alt="Document Logo" src="Images/img1.gif" width="50"></img>
    </div>
    <div style="position:absolute; top:5px; left:63px;">
        <font size="4">
        <b>title (needs to be align to the left,next to img1)</b>
        </font>
    </div>
    <div style="position:absolute; top:0; right:0;">
        <img alt="Logo" src="Images/img.jpg"/>
    </div>
</div>

Things to not about the above code:

1. Make sure the first div has a width the same size as the image within.
2. The second div should have a “left” of: width of first div + 13 (your margin-left)
3. The second div has a top of 5 (your margin-top)
4. You could get a little more fancy by specifying a “right” on the second div. This would help ensure the title and 3rd div/image do not ever overlap.
5. I left the inline styles in for brevity, but please make them external (via classes or ids)
6. Get rid of the FONT tag entirely if you can.