-2

Referencia

Hola, necesito ayuda con una tabla de div tengo creada usando pero el div "D" queda muy abajo y no se ajusta al margen del div "C", se ubica debajo del div "E" Necesito que quede como el la imagen la tabla de div, es necesariamente el uso de los div no con tablas

.tab {
  width: 1000px;
  height: 1000px;
  border: 2px solid black;
}

.contenedor-columna1 {
  box-sizing: border-box;
  padding: 20px;
  float: left;
  width: 800px;
  height: 60px;
  border: 1px solid black;
}

.contenedor-columna2 {
  box-sizing: border-box;
  margin-left: 20px;
  margin-bottom: 20px;
  float: left;
  width: 180px;
  height: 180px;
  border: 1px solid black;
}

.contenedor-columna3 {
  box-sizing: border-box;
  padding: 20px;
  float: left;
  width: 800px;
  height: 520px;
  border: 1px solid black;
}

.contenedor-columna4 {
  margin-left: 20px;
  box-sizing: border-box;
  padding: 20px;
  float: right;
  width: 180px;
  height: 180px;
  border: 1px solid black;
}
<div class="tab">

  <div class="contenedor-columna1">Columna 1</div>
  <div class="contenedor-columna2">Columna 2</div>
  <div class="contenedor-columna3">Columna 3</div>
  <div class="contenedor-columna4">Columna 4</div>

</div>

2

1 respuesta 1

1

Lo que sucede es que en la regla de .contenedor-columna2 especificamente en el selector float tenía la declaración left, basta con cambiarlo a right, es decir float: right

Y para finalizar en el .contenedor-columna3 agregarle margin-top: 20px; para que quede como en la imagen.

En conclusión el código quedaría:

.tab{
    width: 1000px;
    height: 1000px;   
    border : 2px solid black; 
}
.contenedor-columna1{
    box-sizing: border-box;
    padding: 20px;
    float: left;
    width: 800px;
    height: 60px;  
    border: 1px solid black;
}
 .contenedor-columna2{
    box-sizing: border-box;
    margin-left: 20px; 
    margin-bottom: 20px;
    float: right;
    width: 180px;
    height: 180px;  
    border: 1px solid black;
}
.contenedor-columna3{
    box-sizing: border-box;
    padding: 20px;
    float: left;
    width: 800px;
    height: 520px;  
    border: 1px solid black;
    margin-top: 20px;
}
.contenedor-columna4{
    margin-left: 20px;
    box-sizing: border-box;
    padding: 20px;
    float: right;
    width: 180px;
    height: 180px;  
    border: 1px solid black;
}
<div class="tab">
    <div class="contenedor-columna1">Columna 1</div>
    <div class="contenedor-columna2">Columna 2</div>
    <div class="contenedor-columna3">Columna 3</div>
    <div class="contenedor-columna4">Columna 4</div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.