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.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  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>
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  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