SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    1 Post(s)
    0 Thread(s)

    Need help from Gods of CSS :) for floating an image just right


    We are trying to do float an image with CSS and are not getting what we need.
    To be exact check out:

    We would like to float an image Ad banner of about 200px by 200 px to the right
    of the "Search the Network" section. Of course we would want the Ad banner
    image to be Vertically Aligned with the Input field of "I am looking for",
    but as you can see this is not happening and the Image float is lining up on
    top of the Input field rather than on same line as it the input field.
    So when done right the banner Ad should be vertically aligned with the center
    of the Input field of "I am looking for and this whole div would be 1/4 of the
    height that it is now.

    How can when we get the correct affect here?


    Anoox search engine volunteer

  2. #2
    SitePoint Member
    Join Date
    Sep 2012
    Hampshire, UK
    0 Post(s)
    0 Thread(s)
    Hi there
    I have had a look at it and this site is set up with tables within tables so it is not just a simple CSS fix.
    If you set in the CSS
    table { border: thin solid black; }
    then you will see that the image is outside the table where you want it.

    I improved it by putting the div with the image after the table with the " I am looking for " field.
    Make the table width smaller - I think I put 40% but this was maybe a little too small. Give the table a class "float-left".
    Float the image and the table left and they sit together.

    If you adjust the table and the table row with the input field then you can make this line up with the image as you wish.

    My advice though is dont use tables and then you could use positioning to get what you want.

    All the best - Sue


Posting Permissions

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