SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast greg606's Avatar
    Join Date
    Jan 2006
    Location
    Poland, Wrocław
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to place content to the right of the fixed img with css 100% height (no width giv

    How to place content to the right of the fixed img with css 100% height (no width given)

    Image is fixed positioned to the left. And I want the content to go to the right. I don't know the width of the image as it depends on the 100% height.

    Here is the code: pastie.org/830531

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

    Perhaps it would be better if you explain the dynamics of what you are trying to do as it seems very strange.

    Surely a 100% high image would be very wide also and take up nearly all the viewport. Where would the content go?

    Assuming you want to scroll forever sideways you would probably need something like this:

    Code:
    html,body{height:100%}
    body {
        background-color: #000;
        color:#FFF;
    }
    #leftheader,img#bg {
        float:left;
        height:100%;
    }
    #container {
        width:3000px;
        margin-right:-30000px;
        height:800px;
        float:left;
    }
    #con0, #con1, #con2, #con3, #con4, #con5 {
        width: 250px;
        margin: 20px;
        padding: 10px;
        float:left;
    }
    #con0{width:633px}
    That assumes that you would want to scroll forever sideways which seems to be what you want with the massive 3000px width.

    However Firefox 3 has a bug and won't move the content away from the image as it takes the image's original width as the calculation for the content box and will not change it even when the viewport is resized. Other browsers are ok so it's clearly a Firefox 3+ bug (ff2 is ok).

    The layout of course makes no real sense because the 100% high image does not grow in height if the content is taller.

    What you seem to be asking for doesn't seem possible, feasible or usable unless I misunderstand the requirements

    Why can't you just used a fixed width fixed positioned background image repeated down the side of the body for a similar effect.

  3. #3
    SitePoint Enthusiast greg606's Avatar
    Join Date
    Jan 2006
    Location
    Poland, Wrocław
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Picture is worth thousand of words
    http://szczotka.net/image.jpg

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Hi, you could create a wrapper and give that left padding (equal to the (band?) images width). Place the backgrounbd on that element as well.

    Then the content will start on the right
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

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

    I think you'll have to settle for a fixed width side image that sits in the background of the body and then use the method that Ryan mentions above.

    The scaling 100% high image effect wont work very well and is buggy in Firefox (as it won't recognise the width of the scaled image).

    You could probably do it with JS but I'm not sure it's an effect I would find pleasing.


Tags for this Thread

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
  •