<div> banner aligned to the right of a <table>

Discussion in 'CSS' started by spooksie, Sep 20, 2005.

0
  1. #1
    Hi

    I'm having a problem at the moment on CSS2 positioning. Basically I need to put a floating banner to the right of a table. One of the problems is that the <table> is aligned=Center.

    I've managed to get it right, but once I change resolutions it doesn't work. Does anyone know any way of making it stick to the right of the table and that will work on all resolutions. I've tried absolute percentages? and looked all over the web. If you can help, thank you.

    I've done a diagram to illustrate my problem.

    [​IMG]

    Cheers

    Vinnie
    Designer and CSS2

    Earn 20% by pointing clients to us.
    http://www.definitivelabs.com
     
    spooksie, Sep 20, 2005 IP
  2. maro

    maro Peon

    Messages:
    356
    Likes Received:
    16
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Did you try putting the <div> and the <table> inside a bigger <table>?
     
    maro, Sep 20, 2005 IP
  3. Amsterdam

    Amsterdam Well-Known Member

    Messages:
    361
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    128
    #3
    Just to clarify, do you want the div to align right regardless of the resolution? If so, then users with 800x600 will have to scroll sideways to see it.
     
    Amsterdam, Sep 21, 2005 IP
  4. bhutz

    bhutz Peon

    Messages:
    76
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Maybe you could post a link to the page where we can see a demo.
    I think first of all, if your table is 760px wide the widest banner you could have and still have displayed would be 10px, I'm sure 800x600 users only get 780px width worth of page. (on IE anyway)

    I would suggest that you visit this css layout technique,I use this method all the time for my layout. I think you will need to put you table inside a div, at least that way you will have more control over it.

    I would approach it like... 
    <div id="container">
    <div id="table">table here</div>
    <div id="banner">Banner here</div>
</div>
    Code (markup):
    float container div left, float table div left and float banner div right.(don't forget to add width for each div) All is explained in the above link, good luck
     
    bhutz, Sep 21, 2005 IP