problema para imprimir columnas flotantes

[Montes28]

hola amigos espero me puedan ayudar ,

tengo 2 COLUMNAS FLOTANTES en mi pagina y necesito imprimir la pagina y poder ver las columnas flotantes en la impresión pero solo veo esto http://imageshack.us/f/835/impresion.jpg/

Código CSS:

#div-1a {
    float:left;
    width:600px;
}
#div-1b {
    float:left;
    width:200px;
}
 

Código Javascript:

$("#imprime").click(function (){
$.jPrintArea("#imprimir");
});
 

<div class="container" id="container">
<div id="imprimir">
<div id="div-1a">
div 1
</div>
<div id="div-1b">
2
</div>
</div>
<div>

[C2am]

Hola
http://librosweb.es/css/capitulo_13/..._imprimir.html

Adios

[pzin]

También podrías trabajar con medidas relativas. Creo que el ancho de un A4 ronda los 800 pixeles, luego quítale los bordes que tengas configurado en la impresora y se va por debajo. Mejor medidas relativas y/o @media print como dice C2am.

[Montes28]

amigos me pueden dar un ejemplo por favor

[pzin]

Pues algo así debería de servir:

Código CSS:

@media print {
  #div-1a {
    float: left;
    width: 70%;
  }
  #div-1b {
    float: left;
    width: 30%;
  }
}
 

Siempre y cuando estos dos div no tengan bordes y/o padding, ya que se sumarían al ancho y se va para abajo quedando igual.

[Montes28]

Bonez hice lo que me indicaste y los dos div no tienen bordes y/o padding

y mira como salio la impresion http://imageshack.us/photo/my-images...mpresion2.jpg/

te cuento que estoy utilizando Bootstrap y para las tablas utilizo las classes table table-bordered table-hover

[pzin]

Lo que hay ahí parece una tabla más que un div.

En caso de ser así, aporta el código completo.

[Montes28]

mira son 3 columnas las cuales las organizo en divs y dentro de los divs estan 3 tablas

Código CSS:

<style type="text/css">
#div-1a {
    float:left;
    width:700px;
    }
    #div-1b {
    float:left;
    width:80px;
    }#div-1c {
    float:left;
    width:80px;
    }
    </style>
 

Código HTML:

<div id="div-1a">
<table class="table table-bordered table-hover">
</table>
</div>
 
 <div id="div-1b">
<table class="table table-bordered table-hover">
</table>
</div>
 
<div id="div-1c">
<table class="table table-bordered table-hover">
</table>
</div>
 

[pzin]

Lo que tienes que hacer es que el ancho del conjunto no supere el 100%. Si son tres columnas —en tu primer mensaje eran dos, se ve que la familia creció— pues esas columnas tendrán que medir 40+30+30%, o 20+40+40%, etc...

Ahora, lo que hay dentro, las tablas, tendrán que ocupar un máximo de 100% cada una, ya que si no se salen de su elemento contenedor, empuja a lo demás y se descuadra.

[Montes28]

hice lo que me indicaste pero no me funciona, que estoy haciendo mal?

Código CSS:

#div-1a {
    float:left;
    width:80%;
    /*width:700px;*/
    }
    #div-1b {
    float:left;
    width:10%;
    /*width:80px;*/
    }#div-1c {
    float:left;
    width:10%;
   /* width:80px;*/
    }
 

<table width="100%" class="table table-bordered table-hover">

[pzin]

¿Lo tienes subido a algún sitio? Para ver el código completo.

[Montes28]

no lo tengo en ningun sitio , como hago para que tu lo puedas ver?

[pzin]

Ponlo en jsbin.com, jsfiddle.net o codepen.io.

[Montes28]

ya lo subi y aca lo puedes ver http://jsfiddle.net/montes28/fAAZ9/1/

http://jsfiddle.net/montes28/fAAZ9/1/embedded/result/

[pzin]

¿Y todas esas clases e IDs que no has subido no tienen ningún estilo definido?

Si imprimo lo que has subido, a mi me lo imprime bien como lo quieres.

[Montes28]

mira como me imprime http://imageshack.us/f/716/impresion4.jpg/

y las clases que indicas estan en External Resources http://bootswatch.com/cosmo/bootstrap.css

[pzin]

Tienes un contenedor que mide 940 pixeles. Supongo que será ese el problema. Puedes poner otra regla en el @media print {} para reescribirlo y que el ancho sea 100%.

[Montes28]

Bonez hice lo que me indicaste pero no funciona

Código CSS:

.container{
  width:100%;
  }
 

[pzin]

Pues debería, a mi me funciona.



¿Lo pusiste dentro de la regla de la impresión?

[Montes28]

Bonez gracias por responder lo que pasa es que quiero imprimir dandole click al icono de impresion(voy a quitar este icono) voy a dejar la opcion de imprimir con control +p , y me aparece asi http://imageshack.us/f/163/impresion5.jpg/

como puedo quitar la parte que dice monitoreo volcanico y la parte de la tabla que aparece en gris ?

acabo de hacer un cambio en la regla de impresion y la deje asi

Código CSS:

@media print {
 
}
 

http://imageshack.us/f/855/impresion6.jpg/

solo me resta quitarle el banner de monitoreo y la parte de las tablas que salen en gris

[pzin]

Para ocultar cosas puedes usar display: none; aplicándolo al elemento que quieras ocultar.

[Montes28]

Bonez como le quito el titulo de la pagina y el enace http://localhost/..... para que no salga en la impresion

y esa parte gris de las tablas como la quito http://imageshack.us/f/195/impresion7.jpg/

[Montes28]

ya se porque en la impresión la tabla sale con un gris en la primera columna

Código CSS:

.table-bordered {
border-collapse: separate;
}
 

como hago para que al momento de la impresion no salga ese valor?

si le quito border-collapse: separate;

la tabla me aparece asi http://imageshack.us/f/607/impresion8.jpg/ mira la ultima columna la de la derecha