help with image alignment inside a <div>

[Tim Sheets]

Hi all,

I am having a problem that seems so simple, I am almost embarrassed to
ask about it.

I am working on a page that has the layout largely css driven. The top
of the page has two <img> tags, one a logo, the other a graphic just for
looks. If I use the following code:

<div id="header">
<nobr><img src="jclogo.gif " alt="Jaycees logo" width="200"
height="115"><i mg src="testbanner 2.jpg" alt="banner, Peoria Skyline"
width="580" height="115"></nobr>
</div>

Everything works, but is left justified and butted up against each other.

What I would like, is the logo to be left justified, and the other
graphic to be right justified.

If I add align="right" (or a class to the css aligning it right), it
works fine in IE6, but in FF/Moz it ends up under the 'header' <div>, on
top of the main content of the page..almost like it was floated from
another <div>.

The mock-up can be viewed at

http://s120378707.onlinehome.us/mock1/mock1-broken.htm

The one where it is left justified is at

http://s120378707.onlinehome.us/mock1/mock1.htm

If you need the css file to assist, let me know (like I said, even
align="right" on the <img> tag has this effect.

Thanks,

Tim

[Ståle Sæbøe]

Re: help with image alignment inside a &lt;div&gt;

Tim Sheets wrote:[color=blue]
> Hi all,
>
> I am having a problem that seems so simple, I am almost embarrassed to
> ask about it.
>
> I am working on a page that has the layout largely css driven. The top
> of the page has two <img> tags, one a logo, the other a graphic just for
> looks. If I use the following code:
>
> <div id="header">
> <nobr><img src="jclogo.gif " alt="Jaycees logo" width="200"
> height="115"><i mg src="testbanner 2.jpg" alt="banner, Peoria Skyline"
> width="580" height="115"></nobr>
> </div>
>
> Everything works, but is left justified and butted up against each other.
>
> What I would like, is the logo to be left justified, and the other
> graphic to be right justified.
>
> If I add align="right" (or a class to the css aligning it right), it
> works fine in IE6, but in FF/Moz it ends up under the 'header' <div>, on
> top of the main content of the page..almost like it was floated from
> another <div>.
>
> The mock-up can be viewed at
> http://s120378707.onlinehome.us/mock1/mock1-broken.htm
>
> The one where it is left justified is at
> http://s120378707.onlinehome.us/mock1/mock1.htm
>
> If you need the css file to assist, let me know (like I said, even
> align="right" on the <img> tag has this effect.
>
> Thanks,
>
> Tim[/color]
Mock 1 broken looks fine to me (FF). Did you solve the problem? I see
the strange <nobr> tag is gone :)

Anyway I was going to advice you to take a look at the CSS float property.

[Tim Sheets]

Re: help with image alignment inside a &lt;div&gt;

Ståle Sæbøe wrote:
[color=blue]
> Tim Sheets wrote:
>[color=green]
>> Hi all,
>>
>> I am having a problem that seems so simple, I am almost embarrassed to
>> ask about it.
>>
>> I am working on a page that has the layout largely css driven. The
>> top of the page has two <img> tags, one a logo, the other a graphic
>> just for looks. If I use the following code:
>>
>> <div id="header">
>> <nobr><img src="jclogo.gif " alt="Jaycees logo" width="200"
>> height="115"><i mg src="testbanner 2.jpg" alt="banner, Peoria Skyline"
>> width="580" height="115"></nobr>
>> </div>
>>
>> Everything works, but is left justified and butted up against each other.
>>
>> What I would like, is the logo to be left justified, and the other
>> graphic to be right justified.
>>
>> If I add align="right" (or a class to the css aligning it right), it
>> works fine in IE6, but in FF/Moz it ends up under the 'header' <div>,
>> on top of the main content of the page..almost like it was floated
>> from another <div>.
>>
>> The mock-up can be viewed at
>> http://s120378707.onlinehome.us/mock1/mock1-broken.htm
>>
>> The one where it is left justified is at
>> http://s120378707.onlinehome.us/mock1/mock1.htm
>>
>> If you need the css file to assist, let me know (like I said, even
>> align="right" on the <img> tag has this effect.
>>
>> Thanks,
>>
>> Tim[/color]
>
> Mock 1 broken looks fine to me (FF). Did you solve the problem? I see
> the strange <nobr> tag is gone :)
>
> Anyway I was going to advice you to take a look at the CSS float property.[/color]

I ran a validation against it, and cleaned that stuff up (any substitute
for the <nobr>??? I would really like to keep the images from wrapping
in the banner.

No, not really fixed. What I did find, is that I was using position:
absolute; in the css, and you have to specify a top: property, which I
had not...only a right: setting. That is where the flakey behavior
probably came from. I still haven't gotten things to work like I want
them. I'll try playing with the float properties.

Thanks,

Tim

[Tim Sheets]

Re: help with image alignment inside a &lt;div&gt;

Tim Sheets wrote:

[color=blue][color=green]
>>
>> Mock 1 broken looks fine to me (FF). Did you solve the problem? I see
>> the strange <nobr> tag is gone :)
>>
>> Anyway I was going to advice you to take a look at the CSS float
>> property.[/color]
>
>
> I ran a validation against it, and cleaned that stuff up (any substitute
> for the <nobr>??? I would really like to keep the images from wrapping
> in the banner.
>
> No, not really fixed. What I did find, is that I was using position:
> absolute; in the css, and you have to specify a top: property, which I
> had not...only a right: setting. That is where the flakey behavior
> probably came from. I still haven't gotten things to work like I want
> them. I'll try playing with the float properties.[/color]

Using a couple of floats and a clear did the trick.

I had to float: left; the logo, and float: right; the banner.jpg Then,
then next <div> had to clear: both;

Any ideas on how to keep the banner images from wrapping to a new line
if the viewport is resized too small?

Thanks again for the pointer.

Tim

[Els]

Re: help with image alignment inside a &lt;div&gt;

Tim Sheets wrote:
[color=blue]
> Tim Sheets wrote:
>
>[color=green][color=darkred]
>>>
>>> Mock 1 broken looks fine to me (FF). Did you solve the problem? I see
>>> the strange <nobr> tag is gone :)
>>>
>>> Anyway I was going to advice you to take a look at the CSS float
>>> property.[/color]
>>
>>
>> I ran a validation against it, and cleaned that stuff up (any substitute
>> for the <nobr>??? I would really like to keep the images from wrapping
>> in the banner.
>>
>> No, not really fixed. What I did find, is that I was using position:
>> absolute; in the css, and you have to specify a top: property, which I
>> had not...only a right: setting. That is where the flakey behavior
>> probably came from. I still haven't gotten things to work like I want
>> them. I'll try playing with the float properties.[/color]
>
> Using a couple of floats and a clear did the trick.
>
> I had to float: left; the logo, and float: right; the banner.jpg Then,
> then next <div> had to clear: both;
>
> Any ideas on how to keep the banner images from wrapping to a new line
> if the viewport is resized too small?[/color]

Floats do that by default.
You could float the left image left, and set the other image to right
align (not float) inside a div which has margin-left:[width of left
image].
Alternatively, you could have the left image just left aligned, and
the other one as a background to <div id="header">.
(background-position:right top;).
This way when the window gets too small, that image will just go
behind the left image.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Squeeze - Labelled With Love