HTML CSS Positioning of elements

0

I need to position three boxes this way:

A Events and Glossary place next to Products, and the title of the best.

I copy my code from how I went in HTML modeling the divs.

<div class="contenedor1">
<h1> <img src="imagenes/productos.gif">Productos </h1>

<div class="contenido">
<p> Las mejores variedades</p>
<img src="imagenes/images5.jpg">
</div>

<div class="contenido">
<p>Carta de vinos</p>
<img src="imagenes/cartavino.jpg">
</div>

<div class="contenido">
<p>Las mejores bodegas </p>
<img src="imagenes/images9.jpg">
</div>

</div>



<div class="contenedor2">
<div class="cont2">
<h1><img src="imagenes/iconoevento.gif"> Eventos </h1>
<h5> Mayo 2011</h5>
<p> Se celebra en la provincia de <br>
Mendoza, el primer fin de <br>
semana de marzo (casi sin <br>
interrupciones desde 1936) y <br>
se trata del homenaje que el <br>
hombre le dedica a su <br>
industria principal: la <br>
vivinicola. </p>
</div>


<div class="cont2">
<h1> <img src="imagenes/glosario.gif">Glosario </h1>
<p> Enólogo: <br>
Experto responsable de <br>
dirigir y asesorar en el <br>
proceso de elaboración <br>
del vino y su almacenaje, <br>
análisi, conservación, <br>
embotellados y <br>
comercialización. <br>
Estudia asimismo el <br>
proceso del cultivo de la <br>
vid, así como los suelos <br>
aptos para determinados <br>
cepajes y otros temas <br>
vinculados.
</p>
</div>


<div class="contenedor3">
<div class="cont3">
<h1>Los Mejores </h1>
<h2>La región vitinícola en Argentina se desarrolla <br> entre los 22° y 42° de latitud sur </h2>
<p> <b> Santa Florentia </b> propome el espumante ideal para acompañar el <br>
brindis de estas fiestas: <b> el BRUT de torrontés </b>, nacido en las<br>
tierras riojanas de los Valles del Famatima. Este espumante es un <br>
<b> varietal 100% torrontés riojano</b>, de sabor fresco y óptima <br>
acidez que se exalta con el frizante de las burbujas, y permite que <br>
los aromas frutales se realcen en boca. <b> BRUT de torrontes </b> <br>
presenta un intenso sabor, con notas de azahares, frutas citricas y <br>
ananá, que exalta los sentidos por su frescura y equilibrada <br>
acidez.</p> 
<br>
<p>Comprar vino significa saber elegir el vino de <br> 
acuerdo a los gustos de cada consumidor.<br></p>

<p> Según el Observatorio Vitinicola Argentino, por el Malbec se <br>
pagó un precio promedio ponderado de $422 el quintal; por el <br>
Chardonnay, $233 el quintal y por la variedad Aspirant Bouchet <br>
$570. Claras diferencias de precio por zona.<br>

</div>

and it's css:

.contenedor1 {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  width:55%;
}

.contenido {
  width: 25%;
  padding: 5px;
}



.contenedor2 {

  display: flex;
  flex-direction: column;

}

.cont2 {
  padding: 0px 10px 10px 40px; 
  margin: 0px 0px 10px 0px;
  background-color:#3B0B0B;
  width: 19%;
  color:#ffffff;
}


.contenedor3 {
  display: flex;
  flex-direction: column;
  align-items: baseline;
}

.cont3 {
  width: 25%;
  padding: 5px;
}
    
asked by Ibarra Emiliano 19.10.2017 в 20:34
source

1 answer

0

There are many ways to organize by columns, you can use properties display: inline-block as you can also use display: flex in a parent element that contains the 3 elements, in this example I have solved the problem with a different form to the two that I've told you before, just use float:left in the columns and apply each% width to be organized as you require:

NOTE: When adding the width of the 3 columns you must give a total of 100% since it is considered that the total width of the screen is 100%. If adding the width of the columns exceeds that value, the last column would break the horizontal alignment and lower it. You must also take into account the external and internal margins of the elements ( margin and padding ) since they affect the width .

You can try running in full screen, and if you want it responsive you should use media queries

*{
    margin: 0;
    padding: 0;
}

.contenedor1 {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    width:55%;
    float: left;
    width: 30%;
}

.contenido {
    width: 25%;
    padding: 5px;
}

.contenedor2 {
    display: flex;
    flex-direction: column;
    float: left;
    width: 20%;
    overflow-x:hidden;
}

.cont2 {
    padding: 0px 10px 10px 40px; 
    margin: 0px 0px 10px 0px;
    background-color:#3B0B0B;
    width: 100%;
    color:#ffffff;
}

.contenedor3 {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    float: left;
    width: 50%;
}

.cont3 {
    width: 100%;
}
<div class="contenedor1">
    <h1> <img src="imagenes/productos.gif">Productos </h1>

    <div class="contenido">
        <p> Las mejores variedades</p>
        <img src="imagenes/images5.jpg">
    </div>

    <div class="contenido">
        <p>Carta de vinos</p>
        <img src="imagenes/cartavino.jpg">
    </div>

    <div class="contenido">
        <p>Las mejores bodegas </p>
        <img src="imagenes/images9.jpg">
    </div>
</div>

<div class="contenedor2">
    <div class="cont2">
        <h1><img src="imagenes/iconoevento.gif"> Eventos </h1>
        <h5> Mayo 2011</h5>
        <p> 
            Se celebra en la provincia de <br>
            Mendoza, el primer fin de <br>
            semana de marzo (casi sin <br>
            interrupciones desde 1936) y <br>
            se trata del homenaje que el <br>
            hombre le dedica a su <br>
            industria principal: la <br>
            vivinicola.
        </p>
    </div>


    <div class="cont2">
        <h1> <img src="imagenes/glosario.gif">Glosario </h1>
        <p> 
            Enólogo: <br>
            Experto responsable de <br>
            dirigir y asesorar en el <br>
            proceso de elaboración <br>
            del vino y su almacenaje, <br>
            análisi, conservación, <br>
            embotellados y <br>
            comercialización. <br>
            Estudia asimismo el <br>
            proceso del cultivo de la <br>
            vid, así como los suelos <br>
            aptos para determinados <br>
            cepajes y otros temas <br>
            vinculados.
        </p>
    </div>
</div>

<div class="contenedor3">
    <div class="cont3">
        <h1>Los Mejores </h1>
        <h2>La región vitinícola en Argentina se desarrolla <br> entre los 22° y 42° de latitud sur </h2>
        <p> 
            <b>Santa Florentia</b> propome el espumante ideal para acompañar el <br>
            brindis de estas fiestas: <b> el BRUT de torrontés </b>, nacido en las<br>
            tierras riojanas de los Valles del Famatima. Este espumante es un <br>
            <b> varietal 100% torrontés riojano</b>, de sabor fresco y óptima <br>
            acidez que se exalta con el frizante de las burbujas, y permite que <br>
            los aromas frutales se realcen en boca. <b> BRUT de torrontes </b> <br>
            presenta un intenso sabor, con notas de azahares, frutas citricas y <br>
            ananá, que exalta los sentidos por su frescura y equilibrada <br>
            acidez.
        </p> 
        <br>
        <p>
            Comprar vino significa saber elegir el vino de <br> 
            acuerdo a los gustos de cada consumidor.<br>
        </p>

        <p>
            Según el Observatorio Vitinicola Argentino, por el Malbec se <br>
            pagó un precio promedio ponderado de $422 el quintal; por el <br>
            Chardonnay, $233 el quintal y por la variedad Aspirant Bouchet <br>
            $570. Claras diferencias de precio por zona.<br>
        </p>
    </div>
</div>
    
answered by 19.10.2017 / 22:05
source