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 2 of 2

Thread: positioning div

  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    positioning div

    Hi, I'm trying to get a div to display within the header in a certain position and not move around when someone re sizes their web browser. I'm using position:absolute, when I try relative it doesn't work and expands the widget's height for some reason and I think I have it nested inside of the header and the weather class div but the header isn't a div. it's html 5 tag so maybe that is the reason why the widget-currentscompact div moves around and doesn't stay put?

    Here's the code:

    Code:
    #widget-currentscompact {
    width:120px;
    height:50px;
    position:absolute;
    top:52px;
    right:200px
    }
    Here's the url for the webpage: http://69.65.18.90/lasallestreetnews.com/

    Thank you!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,739
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello jp12,
    You nest your slideshow in some unnecessary div elements. Have a look at Divitis and how to avoid it.

    When positioning an element, you need to decide what is relevant that it's positioned to. Using your existing markup, look how you can position that relative to #wrapper -
    Code:
     #wrapper {
    width: 940px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
    border: 3px solid #888;
    background: #f5f5f5;
    /* curved border radius */
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
      position: relative;
    }
    #basic_slideshow {
      height: 200px;
      width: 940px;
      position: absolute;
      top: 100px;
      left: 0;
    }

    ...............
    But, does it really need positioning at all? Maybe it's better just to let the document flow naturally -
    Code:
    er {
    width: 940px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
    border: 3px solid #888;
    background: #f5f5f5;
    /* curved border radius */
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    }
    #basic_slideshow {
      height: 200px;
      width: 940px;
      clear: both;
    }
    
    nav {
    width: 940px;
    height: 50px;
    margin: 0 auto;
    background: #333;
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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