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

**Nik Coughlin** · Jun 27 '08, 07:18 PM

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

<don@fivestarte rminals.comwrot e in message
news:2e878038-ad54-49ae-afe9-dbbbf0251bd0@m4 5g2000hsb.googl egroups.com...

Hi,
>
I have four images lined p on a single row. The HTML code is:
>
<div id="header">
<div class="header_i mage">
<img id="home_logo" src="images/home_logo.gif" alt="" />
</div>
<div class="header_i mage">
<img id="acc_spinnin g_logo" src="images/acc_spinning_lo go.gif"
alt="" />
</div>
<div class="header_i mage">
<img id="acc_logo_en d" src="images/acc_logo_end.gi f" alt="" />
</div>
<div class="header_i mage" id="header_imag e_4">
<img id="title_bar_r ight" 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_lo go.gif" alt="spinning logo" /><img
src="images/acc_logo_end.gi f" alt="logo end" /></h1>

**dorayme** · Jun 27 '08, 07:18 PM

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

In article
<2e878038-ad54-49ae-afe9-dbbbf0251bd0@m4 5g2000hsb.googl egroups.com>,
"don@fivestarte rminals.com" <don@fivestarte rminals.comwrot e:

Hi,
>
I have four images lined p on a single row. The HTML code is:
>
<div id="header">
<div class="header_i mage">

....

>
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.co m/alt/three_and_stret ch.html>

--
dorayme

**don@fivestarterminals.com** · Jun 27 '08, 07:18 PM

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

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_lo go.gif" alt="spinning logo" />
<img src="images/acc_logo_end.gi f" 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** · Jun 27 '08, 07:18 PM

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

<don@fivestarte rminals.comwrot e in message
news:f1e75d92-c021-410e-b47d-9af636c397d5@l4 2g2000hsc.googl egroups.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_lo go.gif" alt="spinning logo" />
<img src="images/acc_logo_end.gi f" 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:

404 - File or directory not found.

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

**don@fivestarterminals.com** · Jun 27 '08, 07:18 PM

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

On May 25, 9:07 pm, "Nik Coughlin" <nrkn....@gmail .comwrote:

<d...@fivestart erminals.comwro te in message
>
news:f1e75d92-c021-410e-b47d-9af636c397d5@l4 2g2000hsc.googl egroups.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_lo go.gif" alt="spinning logo" />
<img src="images/acc_logo_end.gi f" 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@fivestarterminals.com** · Jun 27 '08, 07:18 PM

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

On May 25, 9:07 pm, "Nik Coughlin" <nrkn....@gmail .comwrote:

<d...@fivestart erminals.comwro te in message
>
news:f1e75d92-c021-410e-b47d-9af636c397d5@l4 2g2000hsc.googl egroups.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_lo go.gif" alt="spinning logo" />
<img src="images/acc_logo_end.gi f" 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** · Jun 27 '08, 07:18 PM

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

<don@fivestarte rminals.comwrot e in message
news:057f6396-7711-467d-918e-6429fcd3de59@t5 4g2000hsg.googl egroups.com...

On May 25, 9:07 pm, "Nik Coughlin" <nrkn....@gmail .comwrote:

><d...@fivestar terminals.comwr ote in message
>news:f1e75d9 2-c021-410e-b47d-9af636c397d5@l4 2g2000hsc.googl egroups.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@fivestarterminals.com** · Jun 27 '08, 07:18 PM

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

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_logo s">
<img id="home_logo" src="images/home_logo.gif" alt="logo" />
<img id="acc_spinnin g_logo" src="images/acc_spinning_lo go.gif"
alt="spinning logo" />
<img id="acc_logo_en d" src="images/acc_logo_end.gi f" alt="logo
end" />
</div>
<div id="header_clea r"></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@fivestarterminals.com** · Jun 27 '08, 07:18 PM

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

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

<div id="header">
<div id="header_logo s">
<img id="home_logo" src="images/home_logo.gif" alt="logo" />
<img id="acc_spinnin g_logo" src="images/acc_spinning_lo go.gif"
alt="spinning logo" />
<img id="acc_logo_en d" src="images/acc_logo_end.gi f" alt="logo
end" />
<div id="header_clea r"></div>
</div>
</div>

Thanks,
Don

**Ben C** · Jun 27 '08, 07:19 PM

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

On 2008-05-25, dorayme <doraymeRidThis @optusnet.com.a uwrote:

In article
><2e878038-ad54-49ae-afe9-dbbbf0251bd0@m4 5g2000hsb.googl egroups.com>,
"don@fivestarte rminals.com" <don@fivestarte rminals.comwrot e:
>

>Hi,
>>
>I have four images lined p on a single row. The HTML code is:
>>
><div id="header">
> <div class="header_i mage">

...

>>
>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.co m/alt/three_and_stret ch.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** · Jun 27 '08, 07:19 PM

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

In article <slrng3kvjf.91s .spamspam@bowse r.marioworld>,
Ben C <spamspam@spam. eggswrote:

On 2008-05-25, dorayme <doraymeRidThis @optusnet.com.a uwrote:

In article
<2e878038-ad54-49ae-afe9-dbbbf0251bd0@m4 5g2000hsb.googl egroups.com>,
"don@fivestarte rminals.com" <don@fivestarte rminals.comwrot e:

Hi,
>
I have four images lined p on a single row. The HTML code is:
>
<div id="header">
<div class="header_i mage">

...

>
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.co m/alt/three_and_stret ch.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

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

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

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment