SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Flexible CSS Layouts

    I am really trying to create a particular design as a flexible layout however running into a problem. The design (created by a designer) has implemented left and right vertical shadow borders that extend the full height of the page.

    I know how to implement this design feature using fixed width layout but really would like to create a flexible layout if possible.

    I have uploaded a dummy layout thumbnail to give an idea of what I have to do. Like I mentioned, I know how to implement this width a fixed width layout using body background etc. However I am really shooting for being able to make this design flexible as possible as well as meeting the design requirements of expanding full height within all browsers as required.

    Possible for flexible layout or doomed to stay with fixed width?

    Thank you for any feedback and/or suggestions.

    M
    Attached Images Attached Images

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Short of using CSS3 multiple backgrounds (which only works in one or two browsers currently) you could apply the left border image to a wrapper and have a div within it that carries the right border.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    There are two ways you can do this for a full 100% height layout.

    The first is similar to what ralph mentions above but in a 100% high layout some trickery is needed and we repeat one side image twice in separate divs so that it can break out of the constraints of a 100% high layout.

    http://www.pmob.co.uk/temp/full-length-borders.htm

    The second way is to use my absolute overlay techniques and shown in this example for someone else on the forums.

  4. #4
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmmm I thought about the first option as well but that wouldn't meet the requirement of the full height.

    Interesting workarounds. I'll definitely try those. Thank you everyone for posting your thoughts and suggestions. I is greatly appreciated.

    M


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •