The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] How do I build this layout?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #28578

    Tried just about everything I could think of to get the blue bar to repeat to the right 100% of the browsers width. I tried floating div’s to the right and left etc.

    Any ideas?


    Not sure if this is what you’re looking for or asking, but basically if you want the bar at the top of your page and the length of the browser, you usually apply it on a repeat to the body style itself.


    Actually its a footer and I would like to align it vertically with my main content that’s in a 960px container and repeat the blue to the right 100% of the browsers width.

    I thought I could just create a

    <div thats 100%>and inside that put a <div thats 960px wide and align it center, insert the footer logo and apply my blue background image reapeating-x and then create another <div and float it right with the same background image reapeating-x.

    Im trying not to use tables, and be modern. :D


    Thank you very much, worked perfectly. I like how your container css sticks it to the bottom.

    #container {margin: 0 0 -200px 0; position: absolute; bottom: 0; left: 0; width: 100%; }
    #footer {width: 100%; height: 98px; position: relative;}
    #footer-repeat { background:#005FA0 url(i/footer_bg.png) repeat-x; width: 50%; height: 98px; position: absolute; right: 0; top: 0; z-index: 10; }
    #footer-content { background:#005FA0 url(i/footer_bg.png) repeat-x; height: 98px; width: 960px; margin: 0 auto; z-index: 20; }

    Since the background is the same for both the footer-repeat div and the footer-content div do I need to have a z-index property?

    Thanks again :)

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.