SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: CSSP Problem

Hybrid View

  1. #1
    SitePoint Enthusiast jdriscol's Avatar
    Join Date
    Jul 2002
    Location
    Kalamazoo, MI
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSSP Problem

    Quick Question. I'm trying to put together a simple header bar with a gif at the left and right side to produced rounded edges. The problem lies when positioning the right gif. I have the bar itself wrapped in a DIV, and within that, the right image in a SPAN. I thought that using absolute positioning that setting the right value to zero would make the image butt up against the right edge of the containing DIV, but instead it positions itself according to the screen. I've tried both absolute and relative pos. and nothing works. Am I wrong in my belief that CSSP is relative to the containing block? is a DIV not a containing block? Oh, and also the div's width has been set, so it's not a case of the containing DIV expanding all the way across the screen. Any ideas?

    -JD
    "Do you want it with, or without the moustache? .....Too bad."
    J. Driscoll

  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,

    Absolute Positioning is relevant to the parent. The parent is defined as the nearest ancestor that has a value for the property position other than static (default). If there is none then the parent is deemed to be the html element (body outside of all margins).

    Therefore to position inside an element the outer element must either be position:relative or position absolute. The usual way to do it is to use position:relative (without co-ordinates) and this will have no effect on the surrounding layout and keep the element in the flow of the document.

    e.g.
    Code:
    .outer {
    position;relative;
    width:300px;
    height:300px;
    }
    .inner {
    position: absolute;
    left:0;
    top;0;
    }
    
    <div class="outer">
    <div class="inner">Inner content</div>
    </div>
    This will place the inner element at 0,0 in the outer container (i.e. the top left).

    Hope that helps.

    Paul


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
  •