[Solved] Stop a Repeating-X Background with another Div

[JoeGeddie]

OK I have a problem with my site in the body I have 5 divs which make up a title bar within a wrapper. The Div "headerright2" (headerright2 uses a background repeat of x, also it’s width is auto) is pushing Div "headerright3" too far right and is causing it to appear below it’s desired placement, which would be all on the same line. "Inline" The header setup below is used with all the boxes on my site, which helps save on images as well as coding.

"Is there a way to make headerright3 stop headerright2 so they will stay on the same line?’

Below is the BODY code:

Code:

FEATURED EVENTS AND SITE AREAS

and here is the CSS:

Code:

#wrapper2 {
height: 23px;
display: inline;
width: auto;
}

#headerleft {
width: 5px;
float:left;
background-image:url(images/SiteGraphics/headerleft.png);
display: inline;
height: 23px;

}

#headercenter {
width: auto;
float:left;
background-image:url(images/SiteGraphics/headercenter.png);
display: inline;
height: 23px;

}

#headerright {
width: 20px;
float:left;
background-image:url(images/SiteGraphics/headerright1.png);
height: 23px;
display: inline;

}

#headerright2 {
background-image:url(images/SiteGraphics/headerright2.png);
background-repeat:repeat-x;
height: 23px;
width: auto;
float: none;

}

#headerright3 {
width: 5px;
background-image:url(images/SiteGraphics/headerright3.png);
display: inline;
height: 23px;
background-repeat: no-repeat;
background-position: right;
float: right;
}

Go here for a visual: http://www.pfyfp.com/example1.jpg

[Jerm993]

I didn’t look through your code close only skimmed it, however can’t you just define a width for the repeating x background?

[JoeGeddie]

Quote:

I didn’t look through your code close only skimmed it, however can’t you just define a width for the repeating x background?

Hello Jerm993, Thank you for your time and effort. I was planning to do that but I would have to make a CSS style for every box on the site. Each one would have to vary in length due to "headercenter" expands differently per box.

[noahgelman]

How about getting rid of Headerright2 and Headerright3 and let those just be apart of the div and have Headerleft, Headercenter, and header right images line up so it looks like the header your going for.

An example of sort of what I’m saying is Chris’ seach bar at the top right of this site. Its just an image that’s lined up so it looks like the black bar dips down.

I know you already know that it’s just Headerright2 and Headerright3 seems redundant.

[JoeGeddie]

Yes that seems reasonable, but I would like to keep it the way it is. Thanks for your help though.

[JoeGeddie]

I figured it out guys. It seems all you need to do is put all other divs before the spanning div which would be "headerright2" or you could add a margin. Thanks everyone for your help.

[Author]

Posts