homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Full width banner

Msg#: 4378817 posted 7:36 pm on Oct 24, 2011 (gmt 0)

I am having an issue and it's driving me nuts. I want a banner to span the top of the browser window, regardless of how wide the browser is. I have a b_left.png (282x92px) that I want in the upper left and b_right.png (247x92px) that I want on the opposite end. I have a b_filler.png (1x92px) that I want to use as a background image for the middle filler piece. This is what I have so far:

<div style='height: 92px; width: 100%;'>
<div style='height: 92px; width: 282px; float: left;'>
<img style='width: 282px; height: 92px;' src='b_left.png'>
<div style='height: 92px; float: left; background-image: url(b_filler.png);'>
<div style='height: 92px; width: 247px; float: right;'>
<img style='width: 247px; height: 92px;' src='b_right.png'>

The left and right imgs go where they need, but no background fills the center. If I remove float: left, the background fills but then the right image drops down below the height of the left/middle, augh!

What am I doing wrong? :)



WebmasterWorld Senior Member 5+ Year Member

Msg#: 4378817 posted 7:43 pm on Oct 24, 2011 (gmt 0)

try scrapping the middle div, and putting the b_filler as a background image on the outermost container -- so it stretches 100% across the top. then your other two images can just sit over the top of it.


Msg#: 4378817 posted 8:02 pm on Oct 24, 2011 (gmt 0)

Ahh thanks! Duh, never thought of that (smack forehead). Works great now, thanks again :)

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved