Thread: CSS positioning

    #1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2002
    Location
    Aalborg, Denmark
    Posts
    2
    Rep Power
    0

    CSS positioning


    Im doing some web design, and i have used CSS to place elements. But its great as long as i use absolute positioning of elements.

    I would like to know how to position all my elements centered on my page without loosing their alignment with eachother. Is it possible to do?

    here's a snip of my css code
    ---
    #HorisontalBar {
    position: absolute;
    top: 130px;
    left:10px;
    background-color:#FF0000;
    width: 790px;
    height: 20px;
    border-color: #111111;
    border-left: 1px solid;
    border-right: 1px solid;
    border-top: 1px solid;
    border-bottom: 1px solid;
    z-index: 2;
    }
    #VerticalBar {
    position: absolute;
    top: 0px;
    left: 68px;
    width: 43px;
    height: 601px;
    border-color: #111111;
    border-left: 1px solid;
    border-right: 1px solid;
    border-bottom: 1px solid;
    background-color:#00FF00;
    z-index: 1;
    }
    ---

    the "bars" form a cross.

    if i were to center this cross.. how? without losing their alignment?
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2002
    Posts
    87
    Rep Power
    13
    You could try wrapping both the elements within a <div> called 'wrap'. Make sure that 'wrap' is given a position: relative; or absolute; declaration. You might set the height and width to 100%, then set the elements you want positioned with margin-right: auto; - margin-left: auto; - or some combination like that. You'll need to fool with it, but something like that might get you started- just an idea.

    The reason you give your 'wrap' div a relative position, is so that your positioned elements stay positioned the way you need them.

IMN logo majestic logo threadwatch logo seochat tools logo