CSS para contenedores divs y caer a la siguiente línea

Question

Soy más un programador que un diseñador, y estoy tratando de aceptar <div> s en lugar de usar tablas, pero me estoy atascando.

Esto es lo que intento hacer. Estoy configurando una página de encuesta. Quiero que el texto de cada pregunta se ubique en la parte superior del div azul y que se ajuste si es demasiado largo. Quiero que todas las divisiones rojas se alineen en la esquina superior derecha de la división del contenedor.

Diseño http://img528.imageshack.us/img528/4330/divsforsurveyop2. jpg

Esto es con lo que comencé, funciona bien siempre que el marco tenga más de 420 píxeles de ancho. Entonces el div rojo salta a la siguiente línea. Creo que me he acercado mal, ¿tal vez debería estar flotando a la derecha?

.greencontainer{
    width:100%;
    spacing : 10 10 10 10 ;
    float: left; 
}

.redcontainer{ 
    float: left; 
    width: 20px;
    padding: 2 0 2 0;
    font-size: 11px;
    font-family: sans-serif; 
    text-align: center; 
}

.bluecontainer{ 
    clear: both;
    float: left; 
    width: 400px; 
    padding: 2 2 2 10;
    font-size: 11px;
    font-family: sans-serif; 
    text-align: left; 
}

Answer 1

Esto es lo que haría:

<div class="greencontainer">
  <div class="redcontainer">
    <input type="checkbox" />
  </div>
  <div class="bluecontainer">
    <label>Text about this checkbox...</label>
  </div>
</div>

con css:

.greencontainer{
   float:left;
   clear:left;
   width:100%;
 }
 .redcontainer{
   float:right;
   width:20px;
 }
 .bluecontainer{
   margin-right:20px;
 }

Los valores de relleno de PS siempre deben tener unidades, a menos que sean cero.

Answer 2

No flote nada más que el contenedor rojo, y flote hacia la derecha. Asegúrese de que el HTML para los contenedores rojos esté colocado antes que el HTML para los contenedores azules. Mantenga el ancho estático en el contenedor azul y manténgalo despejado: ambos en el contenedor verde.

Answer 3

no use clear: ambos en su contenedor azul porque eliminará cualquier elemento de ambos lados (izquierdo y derecho). y debes hacer que el contenedor rojo flote hacia la derecha.

Answer 4

Tienes " claro: ambos " en el div azul. Eso es lo que creo que causa el problema.

Mire http://www.barelyfitz.com/screencast/ html-training / css / posicionamiento / que tuvo algunas demostraciones prácticas.

Answer 5

Muy pocas pruebas aquí, pero creo que querrás " claro: ambos; " en .greencontainer en lugar de " float: left " ;. También elimine & Quot; clear: both & Quot; de .bluecontainer

Ver más información en: http://www.quirksmode.org/css/clearing. html

Answer 6

No creo que necesites flotar el contenedor verde, ya que es el div que lo contiene. Además, un & Quot; claro: ambos & Quot; la declaración solo sería necesaria si se colocan múltiples divisiones azules / rojas en el mismo contenedor verde.

Probar

.greencontainer{
    width:100%;
spacing : 10 10 10 10 ;

}

.bluecontainer{ 
    float: left; 
    width: 400px; 
    padding: 2 2 2 10;
    font-size: 11px;
font-family: sans-serif; 
    text-align: left; 
}
.redcontainer{ 
    float: right; 
    width: 20px;
    padding: 2 0 2 0;
    font-size: 11px;
font-family: sans-serif; 
    text-align: center; 
}

También es posible que deba agregar un margen derecho al contenedor azul o margen izquierdo al contenedor rojo para obtener un espacio constante entre ellos en lugar de usar un relleno que se relacione con el espacio dentro del div que no lo rodea