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"><img src="testbanner2.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]

Tim Sheets wrote:

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"><img src="testbanner2.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

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]

Ståle Sæbøe wrote:

Tim Sheets wrote:

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"><img src="testbanner2.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

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.

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]

Tim Sheets wrote:

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.

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.

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]

Tim Sheets wrote:

Tim Sheets wrote:

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.

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.

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?

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