SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot pooney's Avatar
    Join Date
    Jan 2006
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fixed width page with divs that stretch half the page? Possible?

    Difficult to explain in words so excuse the incomprehensible title, a picture is worth a thousand words...





    Is that possible and how?
    Web Host Advice - Under Development

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

    Do you mean something like this:

    http://www.pmob.co.uk/temp/fluidside-fixedcentre.htm

    It uses two floats of 50% width and then drags an element across both width negative margins.

    If you don't understand how it works it might be easier for you to make a wide image with one side white and one side coloured and let it stretch 100% and be centred. then nest an inner element of the fixed width inside that.

  3. #3
    SitePoint Zealot pooney's Avatar
    Join Date
    Jan 2006
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's exactly it. Thanks Paul.
    Web Host Advice - Under Development

  4. #4
    SitePoint Zealot pooney's Avatar
    Join Date
    Jan 2006
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, thanks for the response but I have to admit I am having trouble getting this right.

    The page I have designed is 2 column, with the widths being based on the 'perfect ratio'. It's a 1000px wide container with a 618px left col and a 382px right col. In my image the yellow box is in the left column and stretches to the end of the viewport on the left only, the blue cover the 2 columns and stretch to the right hand side only.

    Can you be that accurate? I realise that's harder than 50%.
    Web Host Advice - Under Development

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

    If I understand correctly then I think you mean something like this.

    http://www.pmob.co.uk/temp/fluidside-fixedcentre2.htm

    The left column also holds the right column and it is floated to the side from inside the left column so that both columns keep the same height and stretch the orange band uniformly.

    The only problem is that in IE you will get the 1px background jog but there's not much you can do about it with this method (or probably any other method).

  6. #6
    SitePoint Member
    Join Date
    Oct 2004
    Location
    NJ
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,
    In the style section what is the reason behind mixing em(s) and px with margins and padding for the .content p class?

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    In the style section what is the reason
    Inconsistency

    No reason at all. I usually use en for vertical margins and px for padding. Except where I don;t want margin collapse and then I may use em vertical padding instead


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
  •