Floats Desconocimiento

Código HTML :

<div class="why">
                    <section class="why-intro">
                        <h1 class="jw-titles why-title">why choose We?</h1>
                    </section>
                    <section class="why-content">
                       <article class="why-col why-one">
                           <h3>Simplicity</h3>
                           <p>You will not see our jewelry set rhinestones, huge rocks and massive detalley - we appreciate the simplicity.</p>
                       </article>
                       <article class="why-col why-two">
                           <h3>Handmade</h3>
                           <p>All our decorations - handmade and each of them we put a piece of the soul and the long hours of hard work.</p>
                       </article>
                       <article class="why-col why-tree">
                           <h3>The uniqueness</h3>
                           <p>Do you and your friend will never be the same decorations - all our jewelery is unique.</p>
                       </article>
                       <article class="why-col why-four">
                           <h3>Trust</h3>
                           <p>From the outset, we are building a relationship of trust with our customers.</p>
                       </article>
                    </section>
                </div>

Código CSS :

.why {
    overflow: hidden;
    width: 960px;
    max-width: 100%;
    margin: 0 auto;
}

.why-intro {
  width: 480px;
}

.why-title {
    width: 186px;
}

.why-content {
    width: 480px;
    float: left;
}

.why-col {
}

.why-one {
    width: 220px;
    float: left;
    margin-left: 20px;
}

.why-two {
    width: 220px;
    float: left;
    margin-left: 20px;
}

.why-tree {
    width: 220px;
    float: left;
    margin-left: 20px;
}

.why-four {
    width: 220px;
    float: left;
    margin-left: 20px;
}

DriverOp escribió:

DriverOp escribió:

DriverOp escribió:

Pues yo pensé que esa imagen es un screenshot de cómo te está quedando la página que estás haciendo .

Olvida los floats.

Necesitas dos elementos <div>. A estos le pones display: inline-block; Ponlos dentro de otro elemento <div> con text-align: center; Ajusta el ancho de cada <div>. En el <div> que te queda a la derecha le pones los cuatro párrafos como lo has hecho en el código que has enviado.

Hay otra forma de hacerlo. Es usando flexbox como se describe aquí:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ (en inglés).

DriverOp escribió:

Código CSS :

.texto:first-child{
   /*estilos*/
} 
/*Esto significa que estoy asignando estilos al elemento con clase "texto" que sea el primer hijo de su contenedor. */

Código HTML :

<div>
   <div class="texto"></div> <!-- Este es el que estaríamos seleccionando -->
   <div class="texto"></div>
   <div class="texto"></div>
</div>

Código CSS :

.texto:nth-child(2){
   /*estilos*/
} 
/*Esto significa que estoy asignando estilos al elemento con clase "texto" que sea el segundo hijo de su contenedor. Donde se encuentra el 2 colocamos el numero de hijo que queremos seleccionar*/

Código HTML :

<div>
   <div class="texto"></div> 
   <div class="texto"></div> <!-- Este es el que estaríamos seleccionando -->
   <div class="texto"></div> <!-- Y este es el que seleccionariamos con ,texto:nth-child(3) o lo que es lo mismo .texto:last-child (ultimo hijo)-->
</div>

fede5426 escribió:

.texto:first-child{
   /*estilos*/
} 
/*Esto significa que estoy asignando estilos al elemento con clase "texto" que sea el primer hijo de su contenedor. */

<div>
   <div class="texto"></div> <!-- Este es el que estaríamos seleccionando -->
   <div class="texto"></div>
   <div class="texto"></div>
</div>

.texto:nth-child(2){
   /*estilos*/
} 
/*Esto significa que estoy asignando estilos al elemento con clase "texto" que sea el segundo hijo de su contenedor. Donde se encuentra el 2 colocamos el numero de hijo que queremos seleccionar*/

<div>
   <div class="texto"></div> 
   <div class="texto"></div> <!-- Este es el que estaríamos seleccionando -->
   <div class="texto"></div> <!-- Y este es el que seleccionariamos con ,texto:nth-child(3) o lo que es lo mismo .texto:last-child (ultimo hijo)-->
</div>