Divs, float and align, need some help.

Question

Hi all,

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

Try adding a min-width to the outermost div and overflow: hidden

Answer 2

Try putting a width or min-width CSS attribute on the top containing div like:

where the 300 is replaced with combined width of the images.

Answer 3

You need to put a min width on the outtermost container, set to the smallest allowable size.

<div style="height:46px; min-width: 200px">
    <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>

Answer 4

Put text-align:left on the outermost div, swap the second and the third inner div, and then get rid of the unnecessary <div><font><b></b></font></div> monster, replacing it with the semantically correct and much shorter <h1></h1>:

<div style="height:46px;text-align:left">
    <div style="text-align:left;float:left;">
      <img alt="Document Logo" src="Images/img1.gif"></img>
    </div>
    <div style="text-align:right;float:right;vertical-align:top;">
        <img alt="Logo" src="Images/img.jpg"/>
    </div>
    <h1>title (will be aligned to the left, next to img1)</h1>
</div>

You can then still apply margins and paddings to the h1 as you see fit.

Answer 5

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.

Answer 6

you could create two container divs and float one left and one right