SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard
    Join Date
    Jul 2001
    Location
    The Netherlands
    Posts
    2,617
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with positioning

    I have a problem with the positioning of <div>'s on a new website I am creating. Have a look at this page.

    There are two things bugging me. The first is the positioning of the big, brown-ish box which holds the Latin text. It start at the same point from the top as the smaller box left next to it, but instead it appears beneath it.
    The second bug is that I want the box with the Latin text to end 160px before the right end of the page (a column of boxes similar to the one of the left will be placed there).

    I used an external stylesheet, take a look below for the code.

    Code:
    body {
    margin: 0px;
    background-color: #686D49;
    }
    
    div.content {
    position: relative;
    top: 0px;
    left: 160px;
    right: 160px;
    text-align: left;
    background-color: #B1A77D;
    border: 3px solid #393D22;
    }
    
    div.header {
    position: relative;
    width: 99%;
    height: 100px;
    top: 5px;
    left: 0px;
    background-color: #B1A77D;
    border: 3px solid #393D22;
    }
    
    div.headerbody {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100px;
    text-align: center;
    }
    
    
    div.main {
    position: absolute;
    width: 100%;
    top: 125px;
    left: 0px;
    background-color: #686D49;
    }
    
    div.menu {
    position: relative;
    width: 150px;
    height: 200px;
    top: 0px;
    left: 6px;
    background-color: #B1A77D;
    border: 3px solid #393D22;
    }
    Does anyone know what I am doing wrong?
    Last edited by Mark T.; Jul 26, 2002 at 09:32.

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2002
    Location
    Penns Woods
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Try this...

    Hi,

    I'm using 800x600 screen resolution and it works for me:

    div.content {
    position: absolute;
    width: 79%;
    top: 0px;
    left: 160px;
    text-align: left;
    background-color: #B1A77D;
    border: 3px solid #393D22;
    }

    BTW, your link has the 'u' and the 'a' transposed.
    // PS! My brain just hit a bad sector...

  3. #3
    SitePoint Wizard
    Join Date
    Jul 2001
    Location
    The Netherlands
    Posts
    2,617
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem is that I don't want to use a percentage for the content div. If I apply a percentage of 79%, this means that it will take 79% in 800x600, which is about 632, and the width of the two side menu boxes together would be something around 250-300 pixels.

    Btw: thnx for the heads up on the link .

  4. #4
    SitePoint Columnist Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,066
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's an alternative way of positioning those elements with CSS that may help, but relise on the height of the header box staying fixed. Firstly, absolutely position the left hand menu box. You can fix it's width to whatever you want and position it X pixels down the page, where X is the height of the header div.

    Then leave the main content <div> without any specific positioning - instead, set it's left margin to the width of the left hand box, and it's right margin to however much space you want left on the right. The absolute positioned left hand menu will overlap the margin of the main content div, and the end result should be exactly what you are looking for.

    Hope that helps,

    Skunk

  5. #5
    SitePoint Wizard
    Join Date
    Jul 2001
    Location
    The Netherlands
    Posts
    2,617
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It sure did. The updated version looks exactly the way it should .


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
  •