How can I get an image to fill the rest of the row width?

[don]

Hi,

I have four images lined p on a single row. The HTML code is:

<div id="header">
<div class="header_image">
<img id="home_logo" src="images/home_logo.gif" alt="" />
</div>
<div class="header_image">
<img id="acc_spinning_logo" src="images/acc_spinning_logo.gif"
alt="" />
</div>
<div class="header_image">
<img id="acc_logo_end" src="images/acc_logo_end.gif" alt="" />
</div>
<div class="header_image" id="header_image_4">
<img id="title_bar_right" src="images/title_bar_right.gif"
alt="" />
</div>
</div>

In my CSS file, I use float:left to ensure they appear on the same
row. My question is, while I want the first three images to appear at
the width they are, I'd like the forth to stretch the rest of the
screen regardless of the screen width. Can this be done sing CSS?

Thanks,
Don

[Nik Coughlin]

<do*@fivestarterminals.comwrote in message
news:2e**********************************@m45g2000 hsb.googlegroups.com...

Hi,

I have four images lined p on a single row. The HTML code is:

<div id="header">
<div class="header_image">
<img id="home_logo" src="images/home_logo.gif" alt="" />
</div>
<div class="header_image">
<img id="acc_spinning_logo" src="images/acc_spinning_logo.gif"
alt="" />
</div>
<div class="header_image">
<img id="acc_logo_end" src="images/acc_logo_end.gif" alt="" />
</div>
<div class="header_image" id="header_image_4">
<img id="title_bar_right" src="images/title_bar_right.gif"
alt="" />
</div>
</div>

In my CSS file, I use float:left to ensure they appear on the same
row. My question is, while I want the first three images to appear at
the width they are, I'd like the forth to stretch the rest of the
screen regardless of the screen width. Can this be done sing CSS?

Firstly your HTML is too verbose. Secondly if it really is a header it
should be marked up as one (in the example below I assume it's the main page
header, so h1). Thirdly you don't need float: left to make them on the same
row if you don't wrap the images in an extra div because images are inline
by default. Fourthly if the image of the logo contains any text, then that
text should be in the alt attribute. Lastly you can get the image to fill
the width by making it a background image, which will repeat automatically.
Something like this should do it:

<style type="text/css">
h1 {
background: url( title_bar_right.gif ) repeat-x;
}
</style>

<h1><img src="images/home_logo.gif" alt="logo" /><img
src="images/acc_spinning_logo.gif" alt="spinning logo" /><img
src="images/acc_logo_end.gif" alt="logo end" /></h1>

[dorayme]

In article
<2e**********************************@m45g2000hsb. googlegroups.com>,
"do*@fivestarterminals.com" <do*@fivestarterminals.comwrote:

Hi,

I have four images lined p on a single row. The HTML code is:

<div id="header">
<div class="header_image">

....

>
In my CSS file, I use float:left to ensure they appear on the same
row. My question is, while I want the first three images to appear at
the width they are, I'd like the forth to stretch the rest of the
screen regardless of the screen width. Can this be done sing CSS?

<http://dorayme.890m.com/alt/three_and_stretch.html>

--
dorayme

[don]

Thanks but It doesn't work completely.

1) I'm getting gaps between the 3 images.
2) The background image is not displayed.

Here is the HTML code:
----------------------------------
<div id="header_logo">
<img src="images/home_logo.gif" alt="logo" />
<img src="images/acc_spinning_logo.gif" alt="spinning logo" />
<img src="images/acc_logo_end.gif" alt="logo end" />
</div>

Here is the CSS code
-------------------------------
#header_logo {
margin: 0;
padding: 0;
background-image: url(../images/title_bar_right.gif )
background-repeat: repeat-x;
}

Thanks,
Don

[Nik Coughlin]

<do*@fivestarterminals.comwrote in message
news:f1**********************************@l42g2000 hsc.googlegroups.com...

Thanks but It doesn't work completely.

1) I'm getting gaps between the 3 images.
2) The background image is not displayed.

Here is the HTML code:
----------------------------------
<div id="header_logo">
<img src="images/home_logo.gif" alt="logo" />
<img src="images/acc_spinning_logo.gif" alt="spinning logo" />
<img src="images/acc_logo_end.gif" alt="logo end" />
</div>

Here is the CSS code
-------------------------------
#header_logo {
margin: 0;
padding: 0;
background-image: url(../images/title_bar_right.gif )
background-repeat: repeat-x;
}

Thanks,
Don

That's because the images are on new lines, so there is white space between
them. What you are seeing is the white space in your markup. If you run
them together like <img src="..." alt="..."><img src="..." alt="..."><img
src="..." alt="..."it goes away.

Either float them left or remove the white space. Here's an example with
floats:

http://nrkn.com/temp/don/

[don]

On May 25, 9:07 pm, "Nik Coughlin" <[e-mail]:

<[e-mail] in message

news:f1**********************************@l42g2000 hsc.googlegroups.com...

Thanks but It doesn't work completely.

1) I'm getting gaps between the 3 images.
2) The background image is not displayed.

Here is the HTML code:
----------------------------------
<div id="header_logo">
<img src="images/home_logo.gif" alt="logo" />
<img src="images/acc_spinning_logo.gif" alt="spinning logo" />
<img src="images/acc_logo_end.gif" alt="logo end" />
</div>

Here is the CSS code
-------------------------------
#header_logo {
margin: 0;
padding: 0;
background-image: url(../images/title_bar_right.gif )
background-repeat: repeat-x;
}

Thanks,
Don

That's because the images are on new lines, so there is white space between
them. What you are seeing is the white space in your markup. If you run
them together like <img src="..." alt="..."><img src="..." alt="..."><img
src="..." alt="..."it goes away.

Either float them left or remove the white space. Here's an example with
floats:

http://nrkn.com/temp/don/

[don]

On May 25, 9:07 pm, "Nik Coughlin" <[e-mail]:

<[e-mail] in message

news:f1**********************************@l42g2000 hsc.googlegroups.com...

Thanks but It doesn't work completely.

1) I'm getting gaps between the 3 images.
2) The background image is not displayed.

Here is the HTML code:
----------------------------------
<div id="header_logo">
<img src="images/home_logo.gif" alt="logo" />
<img src="images/acc_spinning_logo.gif" alt="spinning logo" />
<img src="images/acc_logo_end.gif" alt="logo end" />
</div>

Here is the CSS code
-------------------------------
#header_logo {
margin: 0;
padding: 0;
background-image: url(../images/title_bar_right.gif )
background-repeat: repeat-x;
}

Thanks,
Don

That's because the images are on new lines, so there is white space between
them. What you are seeing is the white space in your markup. If you run
them together like <img src="..." alt="..."><img src="..." alt="..."><img
src="..." alt="..."it goes away.

Either float them left or remove the white space. Here's an example with
floats:

http://nrkn.com/temp/don/

That worked, thanks. However, I cannot get the background image to
display. Are there any tools for debugging this?

[Nik Coughlin]

<do*@fivestarterminals.comwrote in message
news:05**********************************@t54g2000 hsg.googlegroups.com...

On May 25, 9:07 pm, "Nik Coughlin" <[e-mail]:

><[e-mail] in message
news:f1**********************************@l42g200 0hsc.googlegroups.com...

Thanks but It doesn't work completely.

1) I'm getting gaps between the 3 images.
2) The background image is not displayed.
Thanks,
Don

That's because the images are on new lines, so there is white space
between
them. What you are seeing is the white space in your markup. If you run
them together like <img src="..." alt="..."><img src="..." alt="..."><img
src="..." alt="..."it goes away.

Either float them left or remove the white space. Here's an example with
floats:

http://nrkn.com/temp/don/

That worked, thanks. However, I cannot get the background image to
display. Are there any tools for debugging this?

Could be your path. Another thing to check is the case of the file names,
but it looks like your image names are all in lower case so it's probably
not that. Image paths in CSS should be relative to your image. Looks like
you are doing this:

<img src="images/home_logo.gif" alt="logo" />
....
background-image: url(../images/title_bar_right.gif )

So I assume from the about that your CSS is in a seperate folder off the
root in which case the above is correct.

Is the parent div expanding to the width of its parent element? You can
test this by giving it border: 1px solid red so that you can see its
boundaries. If you're floating it then it won't be expanding to width:
auto, it will shrink to contain its contents.

Or you could upload what you have to some temporary web space (plenty of
free ones around if you don't have something), try and make it a minimal
test case just showing your problem and we'll go from there.

[don]

It's a "float" problem. If I comment out the "float: left;" below,
the background image shows. Uncommenting it and it does not show. By
the way, the border also screws up when I float the images; only the
top border shows.

Very strange.

HTML
--------
<div id="header">
<div id="header_logos">
<img id="home_logo" src="images/home_logo.gif" alt="logo" />
<img id="acc_spinning_logo" src="images/acc_spinning_logo.gif"
alt="spinning logo" />
<img id="acc_logo_end" src="images/acc_logo_end.gif" alt="logo
end" />
</div>
<div id="header_clear"></div>
</div>

CSS
-------
#header_logos {
border: 1px solid red;
margin: 0;
padding: 0;
background-image: url(../images/title_bar_right.gif);
background-position: top right;
background-repeat: no-repeat;
}

#header_logos img {
float: left;
}

#header_clear {
clear: left;
}

[don]

I changed the HTML to this (following your example page in your
previous post) and it works now

<div id="header">
<div id="header_logos">
<img id="home_logo" src="images/home_logo.gif" alt="logo" />
<img id="acc_spinning_logo" src="images/acc_spinning_logo.gif"
alt="spinning logo" />
<img id="acc_logo_end" src="images/acc_logo_end.gif" alt="logo
end" />
<div id="header_clear"></div>
</div>
</div>

Thanks,
Don

[Ben C]

On 2008-05-25, dorayme <do************@optusnet.com.auwrote:

In article
<2e**********************************@m45g2000hsb .googlegroups.com>,
"do*@fivestarterminals.com" <do*@fivestarterminals.comwrote:

>Hi,

I have four images lined p on a single row. The HTML code is:

<div id="header">
<div class="header_image">

...

>>
In my CSS file, I use float:left to ensure they appear on the same
row. My question is, while I want the first three images to appear at
the width they are, I'd like the forth to stretch the rest of the
screen regardless of the screen width. Can this be done sing CSS?

<http://dorayme.890m.com/alt/three_and_stretch.html>

Why not just

http://www.tidraso.co.uk/misc/three_and_stretchB.html

In other words: float the images or the div they're in and set a left
margin on the fourth one.

Using position: relative with top: -45px assumes that font descent is
4px (the images are 41px high), but one doesn't know the font size. If
you bump up the font in your example, the right hand div moves down
relative to the imgs.

[dorayme]

In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:

On 2008-05-25, dorayme <do************@optusnet.com.auwrote:

In article
<2e**********************************@m45g2000hsb. googlegroups.com>,
"do*@fivestarterminals.com" <do*@fivestarterminals.comwrote:

Hi,

I have four images lined p on a single row. The HTML code is:

<div id="header">
<div class="header_image">

...

>
In my CSS file, I use float:left to ensure they appear on the same
row. My question is, while I want the first three images to appear at
the width they are, I'd like the forth to stretch the rest of the
screen regardless of the screen width. Can this be done sing CSS?

<http://dorayme.890m.com/alt/three_and_stretch.html>

Why not just

http://www.tidraso.co.uk/misc/three_and_stretchB.html

In other words: float the images or the div they're in and set a left
margin on the fourth one.

Using position: relative with top: -45px assumes that font descent is
4px (the images are 41px high), but one doesn't know the font size. If
you bump up the font in your example, the right hand div moves down
relative to the imgs.

I was just playing about and I have been meaning to take it down! How
can one take words and things back from history? It is not like a tape.

You are right. Much better. And the images can be spaced too with yours.

(one of the things I did not know was if the OP wanted gaps between his
images and I did not want to have the bg all the way underneath in case.
But my "solution" was no good really, for the reason you mention -
different browsers and font settings bring this out).

I just had a Salieri moment and was thinking how good old JK's sub/sup
idea was yesterday and relative positioning was in my mind, throwing me
off balance. I like simple but good ideas. He comes up with these things
for one reason and one reason only, to keep me unbalanced... I was very
badly shaken by it. God is against me. <g>

--
dorayme