Necesita div css genérico que no se superponga (como una tabla)

Question

Estoy intentando usar divs en lugar de tablas para diseñar cuadros alrededor de mi contenido.El contenido puede ser cualquier tamaño y necesita permitir que el navegador sea redimensionado en cualquier grado.Necesita el color de fondo y el borde para contener el contenido.Esto funciona bien con tablas.¿Cómo consigo que un div funcione de la misma manera?

Nota:Agregué "_" porque mis espacios que no se separan se estaban perdiendo.

Página de Ejemplo

Imagen de muestra

_{(fuente: c3o.com)}

Contenido:

<style type="text/css">
    div.box, table.box
    {
        padding: 10px 1000px 10px 10px;
    }

    div.box-header, td.box-header
    {
        border:  solid  1px  #BBBBBB ;
        font-size: larger;
        padding: 4px;
        background-color: #DDDDDD;
    }   

    div.box-body, td.box-body
    {
        padding: 6px;
        border:  solid  1px  #BBBBBB ;
        border-top: none;
    }
</style>


<div class="box">
    <div class="box-header">please_help_make_these_divs_stop_overlapping</div>
    <div class="box-body">please_help_make_these_divs_stop_overlapping</div>
</div>

<table class="box" width="100%" cellpadding="0" cellspacing="0">
    <tr><td class="box-header">tables_make_good_containers_tables_make_good</td></tr>
    <tr><td class="box-body">tables_make_good_containers_tables_make_good</td></tr>
</table>

Answer 1

No hay manera fácil de hacer esto es que crossbrowser amigable, que yo sepa.

Por lo menos en Firefox puede crear una tabla simulada mediante el establecimiento de divs con

display:table;
display:table-row;
display:table-cell;

Para que los divs funcionan como elementos de la tabla. A continuación, la caja contendrá su contenido. Ya sea que es una buena solución o no es discutible.

He tenido problemas similares con diseños de página a mí mismo. Por lo general, he resuelto mediante el establecimiento de los min-width y overflow: auto;

Answer 2

Si realmente no desea utilizar una tabla que puede hacer esto:

div.box div {
  overflow: hidden;
  zoom: 1; /* trigger haslayout for ie */
}

La próxima vez que este tipo de problema se presenta vaya a giveupandusetables.com .

Answer 3

Una forma es hacer que sus cajas de flotadores. Añadir float: left; a la caja, caja de cabecera, y la caja de cuerpo. Añadir clear: both; a la caja de cuerpo para obligarlo a continuación caja de cabecera. Usted probablemente tendrá que añadir una propiedad claro para cualquiera que sea el contenido de la siguiente manera también.

Usted no recibirá bordes derecho de la caja de cabecera y la caja de cuerpo para alinear, sin embargo. Si desea que sus anchos sean los mismos, que realmente quieres una mesa. Tabla es una herramienta para hacer todas las células en la misma columna para compartir los anchos.

Para otras ideas, echa un vistazo a esta cuestión de forma .

Answer 4

En primer lugar, usted debe utilizar el marcado semántico. Si algo es una marca de encabezado y el contenido hacia arriba, como tal, con las etiquetas de cabecera y de párrafo. Eso le ayudará a moverse fuera de la 'tabla de ida' de pensamiento eras intenta emular su margen de beneficio y estilos como una mesa, el marcado debe ser lo primero, CSS puede venir después.

Lo siguiente debe hacer lo que quiera:

<style type="text/css">
    * {
    margin:0px;
    padding:0px;
    }
.box {
border: solid 1px #BBBBBB;
margin:10px;
}
.box h3 {
padding: 4px;
border-bottom: solid 1px #BBBBBB;
background-color: #DDDDDD;
}
.box p {
padding: 6px;
}
</style>

<div class='box'>
    <h3>please help make these divs stop overlapping</h3>
    <p>please help make these divs stop overlapping</p>
</div>

Pensando en el marcado y el estilo separado es el camino a CSS Zen Maestría: o)

Answer 5

Esto funciona (en realidad mantiene juntos mejor que las tablas en IE7 también)

div.box{
  float:left;
  width:auto;
  margin: 10px 1000px 10px 10px;
}

div.box-header{
  float:left;
  width:100%;
  border:  solid  1px  #BBBBBB ;
  font-size: larger;
  padding: 4px; 
  background-color: #DDDDDD;
}

div.box-body{
  clear:left;
  float:left;
  width:100%; 
  padding: 4px; 
  border:  solid  1px  #BBBBBB ; 
  border-top: none;
}   

NOTA: ambos cuadros tienen que tener el mismo relleno a la izquierda y la derecha o uno se adentra un poco

.

Answer 6

No se necesitan

Los flotadores, pero parecen estar confundiendo a los usos del margen vs relleno. Los siguientes ajustes menores a su estilo funciona como usted lo necesita:

<style type="text/css">
    div.box, table.box
    {
        margin: 10px 1000px 10px 10px;
        border:  solid  1px  #BBBBBB ;
       padding: 0px;
    }

    div.box-header, td.box-header
    {

        font-size: larger;
        padding: 4px;
        background-color: #DDDDDD;
    border-bottom:  solid  1px  #BBBBBB ;

    }   

    .box-body, td.box-body
    {
        padding: 6px;
    }
</style>

He cambiado el relleno en la caja de un margen, se trasladó la frontera a su caja, y se añade un subrayado a la cabecera.

Answer 7

tuve este problema también se utiliza Firefox 6.0.1, Opera 10.62, Safari 5.1, pero no en IE 9, y el overflow: auto fijo que en todos los navegadores. Nada más lo hizo. También probé desbordamiento:., lo cual también solucionó el problema, pero parece que no es contener un valor válido para el desbordamiento, así que estoy asumiendo que, dado que el valor no era válido, auto fue sustituido