dcsimg
www.webdeveloper.com
Results 1 to 5 of 5

Thread: css and multiple divs

  1. #1
    Join Date
    Jan 2006
    Posts
    64

    css and multiple divs

    Hi. Here's my question. I want to place several divs inside of a cell and I will use javascript to set which div is visible. Without specifying an absolute pixel position, how do I get all the divs to appear at the top of the cell. When I have tried this in the past, if I didn't set a top pixel position, the divs appeared one underneath the other down the page, not all aligned at the top of the cell.
    Thanks for the help!

    GMan

  2. #2
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    You have to absolutely position them on top of each other. The container should have position:relative then you can position the divs all at 0,0.

  3. #3
    Join Date
    Jan 2006
    Posts
    64

    well...

    Forgive me for not quite following. Here's a quick test I put together, which doesn't do what I want. How do I need to modify it to make it work?
    Thanks again!
    <td>
    <div style="position:relative; top:0px; left:0px;">
    <b><font face="Arial,Helvetica"><font color="#FF0000"><font size=+2>Div
    1 test</font></font></font></b>
    </div>
    <div style="position:relative; top:0px; left:0px;">
    <b><font face="Arial,Helvetica"><font size=+2><font color="#FF0000">&nbsp;</font><font color="#3333FF">Div
    2 test</font></font></font></b>
    </div>
    <div style="position:relative; top:0px; left:0px;">
    <b><font face="Arial,Helvetica"><font size=+2><font color="#3333FF">&nbsp;
    </font><font color="#00CC00">Div 3 test</font></font></font></b>
    </div>
    </td>

  4. #4
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    HTML Code:
    <div style="position:relative;width:100px;height:100px">
    <div style="position:absolute;top:0;left:0;width:100px;height:100px;background:red"></div>
    <div style="position:absolute;top:0;left:0;width:100px;height:100px;background:green"></div>
    <div style="position:absolute;top:0;left:0;width:100px;height:100px;background:blue"></div>
    </div>

  5. #5
    Join Date
    Jan 2006
    Posts
    64

    Done

    Case closed! Thank you sir!

    GMan

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles