duda herencia css

[pampa_]

hola a todos, tengo una duda/problema

en mi hoja de estilos tengo...

Código HTML:

#main{float:left; display: inline; width:603px}
 
#main .box{width:603px; margin-bottom:18px; padding-bottom:0}/*padding-bottom a 18px*/
#main .box h2{width:588px; background:#8dc72d url(images/h2-long.gif) no-repeat right 0; margin-bottom:15px}
#main .box ul.line{width:603px; padding-left:0}
#main .box ul.line li{float: left; display: inline;padding-left:13px; padding-bottom:0}
#main .box ul.line li a{ font-weight: bold; float: none;}
#main .box ul.line li a.frm{display: block; margin-bottom:10px}
#main .box ul.line li a img{display: block; padding:1px;}
#main .box ul {padding-left:13px}
#main .box li {padding-bottom:24px}
#main .box li .info{padding-left:11px; float: left; display: inline; width:390px}
#main .box li .info h4{font-size: 15px; color:#fff; padding-bottom:10px}
#main .box li .info a.up{float: left;}
#main .box li .info p{padding-bottom:12px;}
 
.columnica{width:200px; float:left;}
 
.columna{width:200px; float:left;}
 
#main .columnica{width:200px; margin-bottom:18px; padding-bottom:0}
 

y en una pagina esto otro...

Código HTML:

<div id="main">
            <div class="columnica">
                <table border="0"  cellspacing="10" bgcolor="#242424" style='padding-top:0;padding-bottom:25px;padding-right:0;padding-left:0;'>
                    <TR>
                        <TD><P align='left' style='font-family:arial;color:white;font-size:22px;padding-bottom:10px;'>Datos personales</P></TD>
                    </TR>
                </table>        
            </div>
    </div>
       <div class="columna">prueba</div>
    </div>
 

si quito de la hoja de estilos la linea
#main .columnica{width:200px; margin-bottom:18px; padding-bottom:0}

y en la pagina suprimo el id=main

las dos clases en el navegador se ven juntas, una al lado de la otra, pero al poner esto me las separa....porque?? si yo le estoy poniendo el float:left y el mismo width??
Es que me las separa con el ancho definido en main...

[pzin]

Te sobra el cierre de un div.

[pampa_]

el </div> de la linea11 se me ha colado al copiar... no esta...

[pzin]

Entonces realmente no entiendo bien cual es el problema, será que no te llego a entender. Porque al quitar o poner esa etiqueta de cierra que estaba de más, ocurría eso que decías que se ven "juntas" o no.

[pampa_]

si quito de la hoja de estilos la linea
#main .columnica{width:200px; margin-bottom:18px; padding-bottom:0}

y en la pagina suprimo el id=main

las dos clases en el navegador se ven juntas, una al lado de la otra.
Porque si pongo esto me las separa, si yo le estoy poniendo el float:left y el mismo width??
Es que me las separa con el ancho definido en main...

[pitufoweb]

Iniciado por pampa_

Es que me las separa con el ancho definido en main...

BINGO!



Saludos

[pampa_]

Bingo o pleno?

En fin porque? me coge el ancho ??? si se supone que por la herencia deberia de coger el que le estoy definiendo #main .columnica{width:200px; margin-bottom:18px; padding-bottom:0}

[pzin]

Vale, ahora si entendí el problema.

Iniciado por pampa_

si se supone que por la herencia deberia de coger el que le estoy definiendo #main .columnica

Es que el ancho no te lo está tomando .columnica, sino #main. De hecho .columnica mide esos 200 pixeles que debe.

Para verlo más claro, utiliza bordes o colores de fondo para ver donde está el problema, por ejemplo así. Se ve más claro.