SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

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

    Hello,

    We are trying to do float an image with CSS and are not getting what we need.
    To be exact check out: http://www.anoox.com/index_new.php

    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?

    ThanX,

    Anoox search engine volunteer

    www.anoox.com

  2. #2
    SitePoint Member
    Join Date
    Sep 2012
    Location
    Hampshire, UK
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    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


Bookmarks

Posting Permissions

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