Div Align

Discussion in 'HTML & Website Design' started by peter_anderson, Aug 29, 2008.

  1. #1
    I am using this code to add an ad beside my logo:
    <div style="float: right;">AD CODE HERE</div>
    Code (markup):
    But, it is way too far to the right, and it isn't centered enough.

    How would I fix it?

    Some reccomended margin-s or padding-s , but I don't know what to do :)

    Thanks,
    Peter

    (Site is www.webgamesnetwork.com)
     
    peter_anderson, Aug 29, 2008 IP
  2. Sensei.Design

    Sensei.Design Prominent Member

    Messages:
    3,847
    Likes Received:
    162
    Best Answers:
    0
    Trophy Points:
    310
    Digital Goods:
    1
    #2
    I would use margin-right to give the logo the right position ;)

    <div style="float: right; margin-right:100px;">AD CODE HERE</div>
    Code (markup):
     
    Sensei.Design, Aug 29, 2008 IP
  3. peter_anderson

    peter_anderson Notable Member

    Messages:
    3,382
    Likes Received:
    152
    Best Answers:
    0
    Trophy Points:
    240
    #3
    Thanks :)

    Now, how would I move it down a little?

    See this screenshot http://i38.tinypic.com/301myah.jpg
     
    peter_anderson, Aug 29, 2008 IP
  4. SearchBliss

    SearchBliss Well-Known Member

    Messages:
    1,899
    Likes Received:
    70
    Best Answers:
    2
    Trophy Points:
    195
    Digital Goods:
    1
    #4
    I would suggest giving the DIV tag a class or id name, then adding the CSS to an external style sheet so you can position it where you want it. For example:

    HTML:
    <div id="AD">AD CODE HERE</div>
    Code (markup):
    CSS:
    #AD {
    float:right;
    padding: 5px 5px 5px 5px;
    }
    Code (markup):
    The padding represents in order TOP RIGHT BOTTOM LEFT. Change these to position the ad where you want it. And just use 0 for no value, NOT 0px.
     
    SearchBliss, Aug 29, 2008 IP
  5. Sensei.Design

    Sensei.Design Prominent Member

    Messages:
    3,847
    Likes Received:
    162
    Best Answers:
    0
    Trophy Points:
    310
    Digital Goods:
    1
    #5
    nearly the same

    just add a
    margin-top:20px
    Code (markup):
    you need to check the pixels I just filled in a number
     
    Sensei.Design, Aug 29, 2008 IP
    peter_anderson likes this.
  6. peter_anderson

    peter_anderson Notable Member

    Messages:
    3,382
    Likes Received:
    152
    Best Answers:
    0
    Trophy Points:
    240
    #6
    Thanks!

    That worked :)

    +rep.
     
    peter_anderson, Aug 29, 2008 IP
  7. Sensei.Design

    Sensei.Design Prominent Member

    Messages:
    3,847
    Likes Received:
    162
    Best Answers:
    0
    Trophy Points:
    310
    Digital Goods:
    1
    #7
    your welcome to pm me if you got other questions ;)
     
    Sensei.Design, Aug 29, 2008 IP
  8. SearchBliss

    SearchBliss Well-Known Member

    Messages:
    1,899
    Likes Received:
    70
    Best Answers:
    2
    Trophy Points:
    195
    Digital Goods:
    1
    #8
    True, my method is just cleaner...yet the same.
     
    SearchBliss, Aug 29, 2008 IP
  9. peter_anderson

    peter_anderson Notable Member

    Messages:
    3,382
    Likes Received:
    152
    Best Answers:
    0
    Trophy Points:
    240
    #9
    I never used yours becuase I don't like messing with the script's templates :)

    Thanks anyway
     
    peter_anderson, Aug 29, 2008 IP