How do i float right my item?

Discussion in 'CSS' started by profitline, Aug 12, 2007.

0
  1. #1
    I have uploaded a screenshot of my progress template, and i would like to have my search box(which i have the coding) to be floated on the right top, may i know what is the coding for it?

    I do have a draft one for the <head> correct me if i am wrong on this code and i am not sure what to add for the <body> part, hopefully someone could assist me.


    #Float-right{
    Float:right;
    Margin: 0px;
    }
     

    Attached Files:

    profitline, Aug 12, 2007 IP
  2. just-4-teens

    just-4-teens Peon

    Messages:
    3,967
    Likes Received:
    168
    Best Answers:
    0
    Trophy Points:
    0
    #2
    the above is what u need
     
    just-4-teens, Aug 12, 2007 IP
  3. profitline

    profitline Peon

    Messages:
    383
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #3
    i tried doing it, but it does not float right in place to the exact location i want, do i need to do margin?
     
    profitline, Aug 14, 2007 IP
  4. just-4-teens

    just-4-teens Peon

    Messages:
    3,967
    Likes Received:
    168
    Best Answers:
    0
    Trophy Points:
    0
    #4
    do u have a demo of what is currently happening or some source code?
     
    just-4-teens, Aug 15, 2007 IP
  5. Noddegamra

    Noddegamra Peon

    Messages:
    1,013
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    0
    #5
    It depends where you inserted the div code. You want it at the top.

    Sometimes if your floats aren;t working right you might need to set "clear". As I cant see your code just try it anyway..lol


    #Float-right{
    clear:both;
    Float:right;
    Margin: 0px;
    }
     
    Noddegamra, Aug 15, 2007 IP
  6. Boulder

    Boulder Well-Known Member

    Messages:
    806
    Likes Received:
    46
    Best Answers:
    0
    Trophy Points:
    118
    #6
    Yea, you need a few more attributes that look something like these:


    margin-top: 12px;
    margin-right: 10px;
    padding: 5px 0px 5px 5px;


    Adjust the numbers to adjust the placement of your item.


    Boulder
     
    Boulder, Aug 15, 2007 IP
  7. ginner

    ginner Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    okay my friend i am preety new as well but i think i can help you here goes

    css section

    #float .right{
    float: right;
    margin: 0px;

    Html section

    <div class="right"></div>

    hope this has helped you
     
    ginner, Aug 15, 2007 IP
  8. Pandemix

    Pandemix Well-Known Member

    Messages:
    954
    Likes Received:
    29
    Best Answers:
    0
    Trophy Points:
    120
    #8
    In that case, "div class" should be "div id".
     
    Pandemix, Aug 15, 2007 IP
  9. just-4-teens

    just-4-teens Peon

    Messages:
    3,967
    Likes Received:
    168
    Best Answers:
    0
    Trophy Points:
    0
    #9
    nope it should actually be

    <div id="float">
    <div class="right">Content</div>
    </div>
     
    just-4-teens, Aug 15, 2007 IP
  10. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #10
    lol@ using "float" and "right" as ID/CLASS names, guys be more descriptive.
     
    soulscratch, Aug 15, 2007 IP
  11. Brando

    Brando Peon

    Messages:
    14
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #11
    When you want a Form (Search Box) to be right align then you also need to add the following

    #Float-right form{
    Float:right;
    Margin: 0px;
    }
     
    Brando, Aug 20, 2007 IP
  12. Brando

    Brando Peon

    Messages:
    14
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #12
    check the css design of couponalbum.com. May be you got the solution
     
    Brando, Aug 23, 2007 IP
  13. GWiz

    GWiz Peon

    Messages:
    359
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Your problem seems to be very easy, however it would help if you posted your source code for the template, or a link to the template. That way we can give you the full code to implement for the CSS and the HTML file.
     
    GWiz, Aug 24, 2007 IP