Posicionar div dentro de outra div

cmdmss · 2 de janeiro de 2012

Prezados colegas, bom dia.

Tenho uma div principal, e dentro desta, outra div(secundaria).

estou tentando posicionar a div secundaria na div principal. Quero colocara por exemplo a 10% abaixo do topo da div principal, eu seto o CSS para top:10% mas ela não vai!

Segue abaixo codigo.

<div id="DivPrincipal">
                    <div id="IntDiv1">
                        <table align="left">
                        <? 
                           echo "<tr><td>De ".mostraData($x->dataIni)." a ".mostraData($x->dataFim)."</td></tr>";
                           echo "<tr><td>".$x->local." / ".$x->cidade." - ".$x->estado."</td></tr>";
                           echo "<tr><td><table><tr><td>FALTAM</td></tr><tr><td>X dias</td></tr></table></td></tr>";
                        ?>                        
                        </table>                        
                        <div id="divInt2">
                            <table>
                                <tr><td>Lista de Inscrições</td></tr>
                                <tr><td>
                                    <table>
                                        <tr><td>Inscrição</td><td>Nome</td><td>CPF</td><td>Email</td><td>Celular</td></tr>
                                    </table>
                                </td></tr>
                            </table>
                        </div>
                    </div>
                </div>

e no css

#DivPrincipal{
                position: relative;
                width: 800px;  
                z-index:1;
                top: 10%;               
                border: 1px solid black;
                border-radius:11px;
                background-color: white;
                overflow: auto;

            }
#divInt2{
                position:relative;
                top:30%;
            }

Alguem pode me dar a luz no fim to tunel?

Urubu_Nicolas · 2 de janeiro de 2012

cmdmss, não uso muito as propriedades top, então uma solução que eu posso te dar é dar um padding na DivPrinciapl, para mandar o conteúdo da div secundária para baixo, segue o código CSS:


[COLOR="Magenta"]#DivPrincipal[/COLOR]{
                [COLOR="Blue"]width: [/COLOR]800px[COLOR="Magenta"];[/COLOR]  
                [COLOR="blue"]z-index:[/COLOR]1[COLOR="Magenta"];[/COLOR]  
	        [COLOR="blue"]padding-top:[/COLOR] 10%[COLOR="Magenta"];[/COLOR]                 
                [COLOR="blue"]border:[/COLOR] 1px solid black[COLOR="Magenta"];[/COLOR]  
               [COLOR="blue"] border-radius:[/COLOR]11px[COLOR="Magenta"];[/COLOR]  
                [COLOR="blue"]background-color:[/COLOR] #FFF[COLOR="Magenta"];[/COLOR]  
                [COLOR="blue"]overflow:[/COLOR] auto[COLOR="Magenta"];[/COLOR]  

            }
[COLOR="Magenta"]#divInt2[/COLOR]{
				[COLOR="blue"]background:[/COLOR] #FFF[COLOR="Magenta"];[/COLOR]  
            }