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 9 of 9
  1. #1
    New Coder
    Join Date
    Aug 2008
    Posts
    67
    Thanks
    28
    Thanked 0 Times in 0 Posts

    Question Basic Layout Question, Floats

    Good Day All,

    I have a basic layout question. In this page, any many others, I have my image element floated to the left of a table. This seems to work well in big resolutions but when I view the page on smaller resolutions, the table gets pushed down below the image. In some cases, this is ok... but if I want to prevent this from happening and keep the img and table together to prevent the dropping, how can I do this? What is the cleanest/easiest way? In the example below, the 4th table from the top is the one that will drop first. Any thoughts greatly appreciated. Also, I would like to keep my liquid layout other than grouping these two items together - and I only need to apply this to a few of them, not all.

    http://029c92a.netsolhost.com/abrasives/cutmetalm.html

    Colin

  • #2
    New Coder
    Join Date
    Aug 2008
    Posts
    67
    Thanks
    28
    Thanked 0 Times in 0 Posts
    NOTE: I have found that nesting the image and table inside another table to work acceptably well but would still like to know how to prevent the wrapping via CSS methods if anyone knows. Best, Colin

  • #3
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    The normal behavior of a float is to do exactly that. If you don't want that behavior, don't use a float.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • Users who have thanked jerry62704 for this post:

    colinkites2000 (09-05-2008)

  • #4
    New Coder
    Join Date
    Aug 2008
    Posts
    67
    Thanks
    28
    Thanked 0 Times in 0 Posts
    Thanks Jerry - If I simply put the <img> element and the <table> element right after each other in the markup, the table is placed below the img. I want them to rest side by side. How can I do this without a float?

  • #5
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    I couldn't see the affect you described on your page under either FF3 or IE6. But if you want picture "x" to be in the 0-100, 0-100 (top 0 left 0 bottom 100 and right 100) with something (table, whatever) next to it regardless of the size of the window, then you could:

    img {position:absolute; top:0; left:0;}
    #yourotherthing {margin-left:100px;}

    By making the image absolute, it is out of the formatting of the page. By putting a margin on the div, table, whatever, you move it to allow the image to show (otherwise it would be under the div, table, etc).
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    How about putting those tables inside <p class="action"> (just after the image, before a <br>) ?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    New Coder
    Join Date
    Aug 2008
    Posts
    67
    Thanks
    28
    Thanked 0 Times in 0 Posts
    Abduraooft, I just tried this but the table still drops down below the image if the window is resized too small (or if resolutions get too small). I am trying to keep them aligned no matter what.

    Best,
    Colin

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Did you checked the standard layouts from bonrouge.com
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    New Coder
    Join Date
    Aug 2008
    Posts
    67
    Thanks
    28
    Thanked 0 Times in 0 Posts
    I ended up putting a container div with a set width to the size slightly bigger than the table and image side by side and it worked- no more float dropping. Thank you for your help!


  •  

    Posting Permissions

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