problem with dynamic width div not filling with a color correctly

John Dalberg · Oct 18, 2006

I am creating a header which consists of two adjacent images and filling
the rest of the header width with a solid color so that different
resolutions have the same header. The effect works fine in IE (my users use
IE only) but there's a gap between the header and the rest of the page
which I can't get rid off. (The effect is also broken in Firefox but that's
not important)

How can I remove the gap (and make it work in FF also if possible )?

Tony

code below:
<style type="text/css">
#p3
{
background-repeat: repeat-x;
background-color: #5D7FA4;
width: auto;
float: left;
}

#p2
{
float: left;
}
</style>

header section:

<div id="p1" style="FLOAT: left; width: 202px; "><img
src="images/logo.jpg" border="0" alt="" width="202" height="64">
</div> <div id="p2"><img src="images/header_text.jpg" width="558"
height="64" border="0" alt=""> </div>
<div id="p3">
<img src="images/clearpixel.gif" width="100%" height="61">
</div>

Ben C · Oct 18, 2006

I am creating a header which consists of two adjacent images and filling
the rest of the header width with a solid color so that different
resolutions have the same header. The effect works fine in IE (my users use
IE only) but there's a gap between the header and the rest of the page
which I can't get rid off. (The effect is also broken in Firefox but that's
not important)

How can I remove the gap (and make it work in FF also if possible )?

[source snipped]

If what you have here works in IE, you're relying on IE bugs. This is
not a good starting point especially when you then need to ask how do I
get rid of this or that gap.

The description of what you want to achieve is quite straightforward
though, and can be done with floats, as you are aiming to do.

Try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Test Page</title>
<style type="text/css">
#A
{
background-color: #5d7fa4;
float: left;
}
#B
{
float: left;
}
#C
{
float: right;
}
</style>
</head>
<body>
<div id="A">
<img src="left.png" id="B">
<img src="right.png" id="C">
<div style="clear: both"></div>
</div>
Content here
</body>
</html>

If it does what you want (I may have not understood right), and if it
works in IE, maybe it will be a better starting point!

John Dalberg · Oct 18, 2006

Ben C said:
I am creating a header which consists of two adjacent images and
filling the rest of the header width with a solid color so that
different resolutions have the same header. The effect works fine in IE
(my users use IE only) but there's a gap between the header and the
rest of the page which I can't get rid off. (The effect is also broken
in Firefox but that's not important)

How can I remove the gap (and make it work in FF also if possible )?

Click to expand...

[source snipped]

Thanks for your reply.

If what you have here works in IE, you're relying on IE bugs. This is
not a good starting point especially when you then need to ask how do I
get rid of this or that gap.

It's not an absolute rule that if something works in IE but not in FF that
this IE is buggy. FF is not a perfect browser either. Do you what the buy
is exactly in my code.

The description of what you want to achieve is quite straightforward
though, and can be done with floats, as you are aiming to do.

Try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd"> <html>
<head>
<title>Test Page</title>
<style type="text/css">
#A
{
background-color: #5d7fa4;
float: left;
}
#B
{
float: left;
}
#C
{
float: right;
}
</style>
</head>
<body>
<div id="A">
<img src="left.png" id="B">
<img src="right.png" id="C">
<div style="clear: both"></div>
</div>
Content here
</body>
</html>

If it does what you want (I may have not understood right), and if it
works in IE, maybe it will be a better starting point!

What I want is this.

image | image | rest of width filled with background color.

I tried your style but it didn't work. There's a gap between the images. I
had this problem when I was working on my style. I don't know why there's a
gap if the second image has float: left which means it should be tangent to
the first image to its right.

Your clear: both means it will put that div below the images which is not
the desired effect. Plus I am sure an empty div does anything. However the
content has a clear: both (not shown in my code) so that the content
renders below the header. My problem was that there's gap between the
header and the content which I don't know why it's happening in IE.

John Dalberg

Ben C · Oct 18, 2006

Ben C said:
Ben C said:

I am creating a header which consists of two adjacent images and
filling the rest of the header width with a solid color so that
different resolutions have the same header. The effect works fine in IE
(my users use IE only) but there's a gap between the header and the
rest of the page which I can't get rid off. (The effect is also broken
in Firefox but that's not important)

How can I remove the gap (and make it work in FF also if possible )?

Click to expand...

[source snipped]

Click to expand...

Thanks for your reply.

If what you have here works in IE, you're relying on IE bugs. This is
not a good starting point especially when you then need to ask how do I
get rid of this or that gap.

Click to expand...

It's not an absolute rule that if something works in IE but not in FF that
this IE is buggy.

No, but in this case, FF did not appear to be doing anything wrong with
the content. It therefore follows that if IE was doing something
different there is a fairly good chance that this was due to IE bugs.

FF is not a perfect browser either. Do you what the buy is exactly in
my code.

As far as I could see there were no bugs in your code, and FF was
rendering it correctly. But the result wasn't what you wanted.

[snip]

What I want is this.

image | image | rest of width filled with background color.

OK, I thought you wanted each image at either side. I now see that you
did actually say "adjacent", so I'm sorry about that.

In my previous example, if you make #C float: left as well, and add
width: 100% to #A, is that the effect you want?

I had this problem when I was working on my style. I don't know why
there's a gap if the second image has float: left which means it
should be tangent to the first image to its right.

Yes it should be, and it is working for me. I don't have your images, so
maybe the gap is actually in one of the images?

How big is the gap?

In your original post I thought you were talking about a gap below the
header. But perhaps you only get that in IE, not Firefox.

Your clear: both means it will put that div below the images which is not
the desired effect.

I don't understand, I thought this was a header?

image | image | background color to edge
Content down here?

That's why I had clear.

Plus I am sure an empty div does anything.

It should clear things if it has clear set on it.

However the content has a clear: both (not shown in my code) so that
the content renders below the header.

Then as you say you don't need the empty div.

My problem was that there's gap between the header and the content
which I don't know why it's happening in IE.

So this is IE only. I don't have access to IE so I can't really help
you.

But one thing did occur to me. If for some reason IE is still treating
the images as if they were normal inline replaced elements, you would
expect a gap below them equal to the current font's descender because
they would be baseline aligned by default.

So you could try adding

img { vertical-align: bottom; }

to the styles and see if that helps.

Help with Visual Lightbox: Scripts	2	May 3, 2023
Help with my responsive home page	2	Dec 14, 2022
Need help , Having problem with Drag n Drop ?	9	Dec 21, 2022
Need help , Having problem with Drag n Drop...	1	Dec 21, 2022
Clickable Div Block	1	Oct 13, 2023
SVG not full width and space	0	Sep 15, 2023
Help with code	0	Jun 12, 2022
How can I get my menu inside of a menu to function properly?	1	Jan 19, 2023

problem with dynamic width div not filling with a color correctly

John Dalberg

Ben C

John Dalberg

Ben C

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads