none
Como establecer un margen fijo entre dos Div

    Pregunta

  • Hola, necesito ayuda con el siguiente css... Tengo el siguiente:

    <style type="text/css">
            .container { width:940px; margin:0 auto; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:13px; line-height:18px; }
            .container .item { float:left; width:400px; margin:0 5px 13px 5px; padding:0 8px 8px 8px; border:1px solid #ccc; }
        </style>

    Con el siguiente Html

    <div class="container">
            <div class="item">
                Sxxxxxx xxxxxx xxxx xxxxxxx xxx xxxxxxxxxxxxx xxxxxxxxxx x xxx xxx xxxxxxxxxxx xxxxxxxxxs ssss xxxxx xxxxxxxxxx xxx xxxxxxxxxxxx xxx xxxxxxxxxxxx. Sxx xxxxxxx, xx xxxxxxxxx xxxxxxxxxxx xx xxxx xx xxxxx xx xxxxxxx xxxxxxx xxxx xx xxxxx. Xxxxxxx xxx xxxxxxx xxxxxxx xxxxxxxxxx xxxxxxxxxx x xxx xxxxx xxxxxxxxxxxxx. www.corporacioncir.com
                Sxxxxxx xxxxxx xxxx xxxxxxx xxx xxxxxxxxxxxxx xxxxxxxxxx x xxx xxx xxxxxxxxxxx xxxxxxxxxs ssss xxxxx xxxxxxxxxx xxx xxxxxxxxxxxx xxx xxxxxxxxxxxx. Sxx xxxxxxx, xx xxxxxxxxx xxxxxxxxxxx xx xxxx xx xxxxx xx xxxxxxx xxxxxxx xxxx xx xxxxx.
            </div>
            <div class="item">
                Sss http://www.xxxxxxxx.com/xxxxx/1301/xxxx-xxxxxxxx-xxx-ssss El xxxxxx xx xxxxxxxx
                de Xxxxxxxx Sssss xxxxxx xxxxxxxx para xxxxxxxxxx la xxxxxx del xxxx xxxxxxxxxxx
                xxxxx xxxxxxx xx xxxxxxx xxxxxx a xx xx: Xsssss Sss, sssss sssss ssssssss al sssssss
                ssssss. www.xxxxxxx.com
                Sss http://www.xxxxxxxx.com/xxxxx/1301/xxxx-xxxxxxxx-xxx-ssss El xxxxxx xx xxxxxxxx
                de Xxxxxxxx Sssss xxxxxx xxxxxxxx para xxxxxxxxxx la xxxxxx del xxxx xxxxxxxxxxx
                xxxxx xxxxxxx xx xxxxxxx xxxxxx a xx xx: Xsssss Sss, sssss sssss ssssssss al sssssss
                ssssss. www.xxxxxxx.com
                Sss http://www.xxxxxxxx.com/xxxxx/1301/xxxx-xxxxxxxx-xxx-ssss El xxxxxx xx xxxxxxxx
                de Xxxxxxxx Sssss xxxxxx xxxxxxxx para xxxxxxxxxx la xxxxxx del xxxx xxxxxxxxxxx
                xxxxx xxxxxxx xx xxxxxxx xxxxxx a xx xx: Xsssss Sss, sssss sssss ssssssss al sssssss
                ssssss. www.xxxxxxx.com
                Sss http://www.xxxxxxxx.com/xxxxx/1301/xxxx-xxxxxxxx-xxx-ssss El xxxxxx xx xxxxxxxx
                de Xxxxxxxx Sssss xxxxxx xxxxxxxx para xxxxxxxxxx la xxxxxx del xxxx xxxxxxxxxxx
                xxxxx xxxxxxx xx xxxxxxx xxxxxx a xx xx: Xsssss Sss, sssss sssss ssssssss al sssssss
                ssssss. www.xxxxxxx.com
            </div>
            <div class="item">
                Ve esto: http://www.xxxxxxxx.com/watch/1301/xxxx-xxxxxxxx-xxx-in-the-xxxx-1-xxxxx-4/?xxxx=vbwn
                Xxxxxx Xoxxxo Xriiiistt - Xwx xx xxxx sssst x ssssss x at Xxxxxxxx.com - Xxxxxxxx is the xxxxx xxxx xxxx xxxx xxxxxx xx xxx xxx!
                www.xxxxxx.com
            </div>
            <div class="item">
                Antes http://www.xxxxxxxxx.com/xx-xxxxxxx/xxxxxxxx/2011/03/xxxxx.jpg Despues
                www.xxxxxxxxx.com
            </div>
        </div>

    Esto luce asi:

    http://s2.subirimagenes.com/otros/previo/thump_7791589untitled.jpg

    Como se puede ver, hay 4 paneles (2 de cada lado) necesito que abajo de cada panel siga el otro inmediatamente, pero si observan los 2 paneles de la izquierda hay un margen muy amplio... Necesito eliminar dicho margen, alguien me ayuda?

    sábado, 23 de junio de 2012 5:13

Todas las respuestas

  • Para que un item fluya a la par de otro, uno de los dos debe ser flotante.  En la imagen, el segundo item (contando de izquierda a derecha, de arriba a abajo) debe ser flotante a la derecha para que el tercer item pueda ocupar el espacio que usted muestra.

    Para lograr dos columnas yo diría que ocupa dos estilos de items donde los items pares son flotantes a la derecha, o los items impares son flotantes a la izquierda.  Tal vez ocupe un clear left o right por ahí.


    Jose R. MCP
    Code Samples

    domingo, 24 de junio de 2012 5:34
    Moderador
  • Para que un item fluya a la par de otro, uno de los dos debe ser flotante.  En la imagen, el segundo item (contando de izquierda a derecha, de arriba a abajo) debe ser flotante a la derecha para que el tercer item pueda ocupar el espacio que usted muestra.

    Para lograr dos columnas yo diría que ocupa dos estilos de items donde los items pares son flotantes a la derecha, o los items impares son flotantes a la izquierda.  Tal vez ocupe un clear left o right por ahí.


    Jose R. MCP
    Code Samples

    Hola gracias... aunque no me salio, no se si lo hice mal o no funciona, sera que me puedes pasar un ejemplito?
    domingo, 24 de junio de 2012 17:00
  • Esta página logra su objetivo en IE8, pero en Chrome no lo logra. :-(

    <html>
    	<head>
    		<style type="text/css">
    			.container
    			{
    				width:  700px;
    				border-width: 1px;
    				border-style: solid;
    				border-color: black;
    				margin: 10px;
    			}
    			.item
    			{
    				width: 46%;
    				border-color: blue;
    				border-width: 1px;
    				border-style: solid;
    				background-color:  #CCEEFF;
    				float: left;
    				margin-left: 2%;
    				margin-right: 2%;
    				margin-top: 1em;
    				padding:  5px;
    			}
    			.right
    			{
    				float: right;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="container">
    			<div class="item">
    				Sxxxxxx xxxxxx xxxx xxxxxxx xxx xxxxxxxxxxxxx xxxxxxxxxx x xxx xxx xxxxxxxxxxx xxxxxxxxxs ssss xxxxx xxxxxxxxxx xxx xxxxxxxxxxxx xxx xxxxxxxxxxxx. Sxx xxxxxxx, xx xxxxxxxxx xxxxxxxxxxx xx xxxx xx xxxxx xx xxxxxxx xxxxxxx xxxx xx xxxxx. Xxxxxxx xxx xxxxxxx xxxxxxx xxxxxxxxxx xxxxxxxxxx x xxx xxxxx xxxxxxxxxxxxx. www.corporacioncir.com
    				Sxxxxxx xxxxxx xxxx xxxxxxx xxx xxxxxxxxxxxxx xxxxxxxxxx x xxx xxx xxxxxxxxxxx xxxxxxxxxs ssss xxxxx xxxxxxxxxx xxx xxxxxxxxxxxx xxx xxxxxxxxxxxx. Sxx xxxxxxx, xx xxxxxxxxx xxxxxxxxxxx xx xxxx xx xxxxx xx xxxxxxx xxxxxxx xxxx xx xxxxx. 
    			</div>
    			<div class="item right">
    				Sss http://www.xxxxxxxx.com/xxxxx/1301/xxxx-xxxxxxxx-xxx-ssss El xxxxxx xx xxxxxxxx
    				de Xxxxxxxx Sssss xxxxxx xxxxxxxx para xxxxxxxxxx la xxxxxx del xxxx xxxxxxxxxxx
    				xxxxx xxxxxxx xx xxxxxxx xxxxxx a xx xx: Xsssss Sss, sssss sssss ssssssss al sssssss
    				ssssss. www.xxxxxxx.com
    				Sss http://www.xxxxxxxx.com/xxxxx/1301/xxxx-xxxxxxxx-xxx-ssss El xxxxxx xx xxxxxxxx
    				de Xxxxxxxx Sssss xxxxxx xxxxxxxx para xxxxxxxxxx la xxxxxx del xxxx xxxxxxxxxxx
    				xxxxx xxxxxxx xx xxxxxxx xxxxxx a xx xx: Xsssss Sss, sssss sssss ssssssss al sssssss
    				ssssss. www.xxxxxxx.com
    				Sss http://www.xxxxxxxx.com/xxxxx/1301/xxxx-xxxxxxxx-xxx-ssss El xxxxxx xx xxxxxxxx
    				de Xxxxxxxx Sssss xxxxxx xxxxxxxx para xxxxxxxxxx la xxxxxx del xxxx xxxxxxxxxxx
    				xxxxx xxxxxxx xx xxxxxxx xxxxxx a xx xx: Xsssss Sss, sssss sssss ssssssss al sssssss
    				ssssss. www.xxxxxxx.com
    				Sss http://www.xxxxxxxx.com/xxxxx/1301/xxxx-xxxxxxxx-xxx-ssss El xxxxxx xx xxxxxxxx
    				de Xxxxxxxx Sssss xxxxxx xxxxxxxx para xxxxxxxxxx la xxxxxx del xxxx xxxxxxxxxxx
    				xxxxx xxxxxxx xx xxxxxxx xxxxxx a xx xx: Xsssss Sss, sssss sssss ssssssss al sssssss
    				ssssss. www.xxxxxxx.com
    			</div>
    			<div class="item">
    				Ve esto: http://www.xxxxxxxx.com/watch/1301/xxxx-xxxxxxxx-xxx-in-the-xxxx-1-xxxxx-4/?xxxx=vbwn
    				Xxxxxx Xoxxxo Xriiiistt - Xwx xx xxxx sssst x ssssss x at Xxxxxxxx.com - Xxxxxxxx is the xxxxx xxxx xxxx xxxx xxxxxx xx xxx xxx!
    				www.xxxxxx.com
    			</div>
    			<div class="item right">
    				Antes http://www.xxxxxxxxx.com/xx-xxxxxxx/xxxxxxxx/2011/03/xxxxx.jpg Despues
    				www.xxxxxxxxx.com
    			</div>
    		</div>
    	</body>
    </html>
    

    El cálculo de las dimensiones en Chrome parece diferir del cálculo en IE.  En IE parece ser más exacto, pues un ancho de 46% por item, más márgenes del 2% a cada lado es 50%, lo cual sería ideal para dos columnas.  De hecho, ahora que recuerdo, el margen izquierdo del item derecho debería colapsar con el margen derecho del item izquierdo según las reglas de CSS y por lo tanto más bien podría aumentar un 1% al ancho del item sin afectar la vista, pero bueno, en la práctica no está sucediendo.

    En todo caso, en IE la página despliega bien; en Chrome hay que bajar el ancho de lso items a 44% y por alguna razón el DIV contenedor no está conteniendo visualmente los items (el  borde negro no enmarca los items en Chrome).


    Jose R. MCP
    Code Samples

    domingo, 24 de junio de 2012 18:15
    Moderador