Skip to main content
removeu 1 caractere do conteúdo
Fonte Link
Miguel Angelo
  • 29,2mil
  • 4
  • 85
  • 114

É possível fazer isso com float, bastando alterar a ordem dos elementos no HTML... o direito deverá vir primeiro e o esquerdo depois:

/* ESTILOS IMPORTANTES PARA A RESPOSTA */
#esquerdo {
    height: 100px;
    overflow: hidden;
}
#direito {
    width: 50px;
    height: 100px;
    float: left;right;
}


/* ESTILOS AUXILIARES */
#container {
    border: #000000 solid 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 90%;
}
#esquerdo {
    background-color: red;
    overflow: hidden;
    border: 2px solid darkred;
    box-sizing: border-box;
}
#direito {
    background-color: yellow;
    border: 2px solid darkolivegreen;
    box-sizing: border-box;
}
<div id="container">
    <div id="direito">direito</div>
    <div id="esquerdo">esquerdo</div>
    container
</div>

É possível fazer isso com float, bastando alterar a ordem dos elementos no HTML... o direito deverá vir primeiro e o esquerdo depois:

/* ESTILOS IMPORTANTES PARA A RESPOSTA */
#esquerdo {
    height: 100px;
    overflow: hidden;
}
#direito {
    width: 50px;
    height: 100px;
    float: left;
}


/* ESTILOS AUXILIARES */
#container {
    border: #000000 solid 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 90%;
}
#esquerdo {
    background-color: red;
    overflow: hidden;
    border: 2px solid darkred;
    box-sizing: border-box;
}
#direito {
    background-color: yellow;
    border: 2px solid darkolivegreen;
    box-sizing: border-box;
}
<div id="container">
    <div id="direito">direito</div>
    <div id="esquerdo">esquerdo</div>
    container
</div>

É possível fazer isso com float, bastando alterar a ordem dos elementos no HTML... o direito deverá vir primeiro e o esquerdo depois:

/* ESTILOS IMPORTANTES PARA A RESPOSTA */
#esquerdo {
    height: 100px;
    overflow: hidden;
}
#direito {
    width: 50px;
    height: 100px;
    float: right;
}


/* ESTILOS AUXILIARES */
#container {
    border: #000000 solid 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 90%;
}
#esquerdo {
    background-color: red;
    overflow: hidden;
    border: 2px solid darkred;
    box-sizing: border-box;
}
#direito {
    background-color: yellow;
    border: 2px solid darkolivegreen;
    box-sizing: border-box;
}
<div id="container">
    <div id="direito">direito</div>
    <div id="esquerdo">esquerdo</div>
    container
</div>

Fonte Link
Miguel Angelo
  • 29,2mil
  • 4
  • 85
  • 114

É possível fazer isso com float, bastando alterar a ordem dos elementos no HTML... o direito deverá vir primeiro e o esquerdo depois:

/* ESTILOS IMPORTANTES PARA A RESPOSTA */
#esquerdo {
    height: 100px;
    overflow: hidden;
}
#direito {
    width: 50px;
    height: 100px;
    float: left;
}


/* ESTILOS AUXILIARES */
#container {
    border: #000000 solid 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 90%;
}
#esquerdo {
    background-color: red;
    overflow: hidden;
    border: 2px solid darkred;
    box-sizing: border-box;
}
#direito {
    background-color: yellow;
    border: 2px solid darkolivegreen;
    box-sizing: border-box;
}
<div id="container">
    <div id="direito">direito</div>
    <div id="esquerdo">esquerdo</div>
    container
</div>