css and multiple divs

@bubba4gmanApr 05.2008

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

to post a comment

CSS

@ray326Apr 05.2008 — #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.

@bubba4gmanauthorApr 05.2008 — #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"> </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"> 

</font><font color="#00CC00">Div 3 test</font></font></font></b>

</div>

</td>[/QUOTE]

@ray326Apr 05.2008 — #

[code=html]<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>[/code]

@bubba4gmanauthorApr 05.2008 — #Case closed! Thank you sir!

GMan

css and multiple divs

4 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

css and multiple divs

4 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #CSS _↴