Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder ubik's Avatar
    Join Date
    Oct 2005
    Location
    westCoast, usa
    Posts
    347
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question position:relative conflict with overflow:auto

    Hello and Good Day to you all.

    I am having a bit of a problem, I have just finished validating my main page in html and css and both passed now when i try to put the css image at the bottom of my page a strange error occurs. I have all of the text inside an overflow:auto container, when i attempt to put the following code inside the html page within this conatiner, a horizontal scrollbar appears for some reason:

    Code:
    <div style="position:relative;top:150px;left:150px;">
    <p>
     <a href="http://jigsaw.w3.org/css-validator/">
      <img style="border:0;width:88px;height:31px"
           src="http://jigsaw.w3.org/css-validator/images/vcss" 
           alt="Valid CSS!">
     </a>
    </p>
    </div>
    i added the div style="position:relative;top:150px;left:150px;". The image gets positioned correctly only thing is, I get a horizontal scrollbar, I chose to use position:relative because it is inside an overflow:auto container

    here is the CSS for my conatiner:
    Code:
    .box {
    position:absolute;
    left:330px;
    top:180px;
    width: 600px;
    height: 360px;
    border-style: double;
    border-color: #990000;
    background-color: #ffffff;
    border-width: 4px;
    overflow: auto;
    padding:10px;
    }
    Any help or suggestions are appreciated, I thank you for your time.
    "True knowledge exists in knowing that you know nothing."
    -Socrates

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Why not use top and left margins instead?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder ubik's Avatar
    Join Date
    Oct 2005
    Location
    westCoast, usa
    Posts
    347
    Thanks
    0
    Thanked 0 Times in 0 Posts
    oh yeah, heheh. Good call. Thanks alot Aerospace. I appreciate your help. I guess position:relative not only moves the text or object but also the invisible margin for the specified lines? So then the document acquires the largest margin found on the page, hence the horizontal scrollbar? .. or somethin like that, lol?
    "True knowledge exists in knowing that you know nothing."
    -Socrates

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    No, position:relative will leave the existing space that div took up plus the new space of the div. Its only good to use when you are maybe moving something over 1 or 2px but anything greater will get you into trouble.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder ubik's Avatar
    Join Date
    Oct 2005
    Location
    westCoast, usa
    Posts
    347
    Thanks
    0
    Thanked 0 Times in 0 Posts
    cool thanks, thats kind of what I was trying to say, I just did not know how to explain it well. Thanks again.
    "True knowledge exists in knowing that you know nothing."
    -Socrates


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •