1 reply [Last post]
BHiller
Offline
newbie
Last seen: 12 years 2 weeks ago
Timezone: GMT-6
Joined: 2007-11-16
Posts: 1
Points: 0

I am trying to create a header that is 100% wide with an image on the left(logo) and an image on the right(gradient) on the same line but I cannont get this to work in browsers other than IE7. When I resize the page in Firefox or Opera the left image floats to the next line when the two images come togather during a page resize.

#Header
{
width: 100%;
height: 79px;
max-height: 79px;
background-color: #002D62;
clear:both;
}
.Header_Left
{
background-image: url(images/AIMS_SquareLeft.gif);
width:334px;
height:79px;
float:left;
clear:left;
}
.Header_Right
{
background-image: url(images/AIMS_SquareRight.gif);
width:424px;
height:79px;
float:right;
clear:right;
}

If Anyone can help with this I would really appreciate it.

Try viewing the following page in IE then in Firefox, the problem occurs when the page gets narrow enough for the images on the left and right side of the header to touch.

http://maps.jocogov.org/CSS_Delete/default.aspx

jinoturistica
Offline
Enthusiast
Jinotega, Nicaragua
Last seen: 11 years 41 weeks ago
Jinotega, Nicaragua
Timezone: GMT-6
Joined: 2007-11-16
Posts: 152
Points: 0

when images collide

when images collide ... something has to happen. There is not enough page width for the combined widths of the objects on the line.

What would you LIKE to happen? By default, one or the other will slip to the next line. With a bit of position absolute and z-order you can make things interesting. Check out the resizing at jinotega.com

Just doin' my best at www.jinotega.com
Tony Robins