Tricky CSS issue

Discussion in 'CSS' started by deuchar1, Feb 28, 2007.

  1. #1
    Hi guys,

    I have a bit of a problem with a site design I'm working on for somebody at the moment. They have a standard centered box layout, fully CSS which I have built already (placed in a container div).

    The problem arose when they decided some of the headers within that container should extend outwith the container boundary and stretch to hit the right-most side of the window. That means breaking out of the container, and knowing how much width is left within the window from the element's right-point.

    I've tried using a transparent gif background for the header sticky-out-bits, but obviously if the body content stretches the content down the images are then misaligned.

    Anyone have any ideas?
    G
     
    deuchar1, Feb 28, 2007 IP
  2. bobby9101

    bobby9101 Peon

    Messages:
    3,292
    Likes Received:
    134
    Best Answers:
    0
    Trophy Points:
    0
    #2
    use something like:

    
    <div class="wrapper">
    <div class="header">
    HEADER
    </div>
    <div class="body">
    BODY
    </div>
    <div class="footer">
    FOOTER
    </div>
    </div>
    
    HTML:
    Then style the header to stretch wider that the body class
     
    bobby9101, Feb 28, 2007 IP
  3. deuchar1

    deuchar1 Guest

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks for the quick reply.
    I don't quite know what you mean :confused:

    I've attached a (crap) example of what I mean - I don't have my trusty Photoshop on here so it was an MS Paint job, sorry :)

    I've outlined the container (white box) and the red block is the header I need expanding. It currently stops at the edge of the container - I need an extra bit added on to the right that continues to the edge of the page.

    I had a z-indexed element relatively positioned to the header that 'sort of' worked, but it caused horizontal scrolling in the browser and IE just laughed at me :(

    Hope I'm not being annoying! Help appreciated.
    G
     

    Attached Files:

    deuchar1, Feb 28, 2007 IP
  4. bobby9101

    bobby9101 Peon

    Messages:
    3,292
    Likes Received:
    134
    Best Answers:
    0
    Trophy Points:
    0
    #4
    what i was saying is, break the container, do the header, then start a new container
     
    bobby9101, Feb 28, 2007 IP
  5. deuchar1

    deuchar1 Guest

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Ahh I see. I follow now! I'll give it a go and let you know how I get on. Many thanks! ;)
     
    deuchar1, Feb 28, 2007 IP