1

introducir la descripción de la imagen aquí

Como veran donde dice Alezandrawp y el texto que está abajo no hay un espacio con los sidebar Este es creo que el código que tiene que ver

.main {
	background: #fff;
	width: 90%;
	max-width: 1000px;
	margin:20px auto;
}

.main .articles {
		width: 68.5%;
		margin-right: 1.5%;
		float:left;
	}
	.main .articles article{
		padding: 20px;
		background: #fff;
		margin-bottom: 20px;
	}
<section class="main"><aside class="de">
    <h3>Disfruta</h3>
    <p>esta página​</p>
  </aside>
  <aside class="iz">
    <h3>segundo sidebar</h3>
    <p>esto es una prueba</p>
  </aside>
  <section class="article">
    <article>
      <h2>Alexandrawp</h2>
      <p>Este es un gran día para ser felíz
      </p>
    </article>
  </section>
  
</section>

2
  • ¿Puedes añadir también el HTML? Tal y como está ahora, no sabes qué es .main o .articles o article y no podemos decirte exactamente qué es lo que hay que modificar. Lee Cómo preguntar y cómo crear un ejemplo mínimo verificable para más información y ayuda.
    – Alvaro Montoro
    Commented el 10 ene. 2018 a las 19:14
  • La foto y el codigo son totalmente diferentes.
    – Alvarez
    Commented el 11 ene. 2018 a las 4:04

2 respuestas 2

1

Es difícil añadirle espacios a elementos no flotados y elementos flotados, por lo general para la composición que buscas se usa float: left en todos los elementos, al menos así lo proponen frameworks como bootstrap o foundation, de esa manera solo basta con usar margin en cualquiera de los elementos (o padding) para separarlos sin que haya problemas de solapamientos. Un ejemplo:

.main {
	background: #fff;
	width: 90%;
	max-width: 1000px;
	margin:20px auto;
}

.main aside {
  width: 20%;
  margin-right: 1.5%;
}

.main .de{ 
  float: right; 
  background: cyan;
  margin-left: 20px;
}

.main .iz{ 
  float: left; 
  background: yellow;
  margin-right: 20px;
}
  
.main .article{
  float: left;
  width: calc(60% - 90px);
  padding: 20px;
  background: #f5f5f5;
  margin-bottom: 20px;
}

.main article{
  background: white;
}
<section class="main">
  <aside class="de">
    <h3>Disfruta</h3>
    <p>esta página​</p>
  </aside>
  <aside class="iz">
    <h3>segundo sidebar</h3>
    <p>esto es una prueba</p>
  </aside>
  <section class="article">
    <article>
      <h2>Alexandrawp</h2>
      <p>Este es un gran día para ser felíz
      </p>
    </article>
  </section>
  
</section>

Si te fijas, flote todos los elementos y use margin para separarlos.

Aunque lo mejor ahora, si es que estás aprendiendo, es que no uses float, sino flexbox, así no tienes que preocuparte por limpiar los flotes y controlas mucho mejor el flujo de los elementos y posición de los elementos. Ya que solo basta con definir el orden de aparición, Un ejemplo:

*, *::before, *::after{ box-sizing: border-box; padding: 0; margin: 0;}

.main {
  background: lightgray;
  display: flex;
  padding: 10px;
}

.main aside,
.main .article{
  padding: 20px;
}

.main aside{
  width: 25%;
}

.iz{
  background: yellow;
  order: 1;
}

.de{
  background: cyan;
  order: 3;
}

.article{
  order: 2;
  width: 50%;
  background: whitesmoke;
}

article{
  background: white;
}
<section class="main">
      <aside class="de">
        <h3>Disfruta</h3>
        <p>esta página​</p>
      </aside>
      <aside class="iz">
        <h3>segundo sidebar</h3>
        <p>esto es una prueba</p>
      </aside>
      <section class="article">
        <article>
          <h2>Alexandrawp</h2>
          <p>Este es un gran día para ser felíz
          </p>
        </article>
      </section>
      
    </section>

Y si quieres una separación, lo puedes lograr usando el atributo que solo funciona con flex llamado justify-content y usar space-between o space-evenly todo depende de lo que quieras lograr un ejemplo:

*, *::before, *::after{ box-sizing: border-box; padding: 0; margin: 0;}

.main {
  background: lightgray;
  display: flex;
  padding: 10px;
  justify-content: space-between; /* o space-evenly*/;
}

.main aside,
.main .article{
  padding: 20px;
}

.main aside{
  width: 25%;
}

.iz{
  background: yellow;
  order: 1;
}

.de{
  background: cyan;
  order: 3;
}

.article{
  order: 2;
  width: 50%;
  margin: 0 20px; /*O cualquier medida que uses para separalos*/
  background: whitesmoke;
}

article{
  background: white;
}
<section class="main">
      <aside class="de">
        <h3>Disfruta</h3>
        <p>esta página​</p>
      </aside>
      <aside class="iz">
        <h3>segundo sidebar</h3>
        <p>esto es una prueba</p>
      </aside>
      <section class="article">
        <article>
          <h2>Alexandrawp</h2>
          <p>Este es un gran día para ser felíz
          </p>
        </article>
      </section>
      
    </section>

5
  • Muchas gracias Edgar escogí la segunda opción, aunque la tercera también quedaba muy bonito, ahora me podrías decir como hago para que el sidebar izquierdo sea menos ancho que el derecho?? Commented el 11 ene. 2018 a las 22:59
  • Si ves a los dos aside les defino el tamaño usando: .main aside{ width: 25% }, simplemente quita el valor del aside que engloba ambos sidebar y dale un valor de ancho a cada sidebar así, ejemplo: .main .iz { width: 30% } y .main .de { width: 20% }. Commented el 11 ene. 2018 a las 23:41
  • estos valores sumados juntos .main .iz{ width: 20%; } .main .de { width: 15% } .article{ order: 2; width: 70%; background: white; } ¿No importan que sobrepasen el 100%? Commented el 12 ene. 2018 a las 15:15
  • Cuando usas flexbox, en realidad no importa si los porcentajes sobrepasen de 100%, estos se acomodarán a un aproximado del que asignes y que siga sumando 100%, pero aunque se pueda, no es lo mejor, la mejor práctica es que si sumen 100%, realmente esto pasa porque existe un propiedad que fuerza o no a seguir el porcentaje indicado y es flex-wrap: wrap / nowrap / wrap-reverse. El uso de wrap por ejemplo, si hará que los porcentajes se comporten como debe ser y sí la suma es superior a 100%, bajará al ultimo. Si te ha gustado mi respuesta, agradecería si me regalas un voto positivo. Éxitos! Commented el 12 ene. 2018 a las 17:59
  • si me ha gustado tus respuestas, muchas gracias he puesto un visto a tu publicación y ya intenté dar un voto positivo pero no me deja, me encantaria que participaras en mis próximas preguntas sobre diseño web Commented el 12 ene. 2018 a las 18:25
0

Pon a tu etiqueta "p" un padding, te dejo un ejemplo

<section class="main"><aside class="de">
    <h3>Disfruta</h3>
    <p>esta página​</p>
  </aside>
  <aside class="iz">
    <h3>segundo sidebar</h3>
    <p>esto es una prueba</p>
  </aside>
  <section class="article">
    <article>
      <h2>Alexandrawp</h2>
      <p class="p-mid">Este es un gran día para ser felíz
      </p>
    </article>
  </section>
  
</section>

.main {
	background: #fff;
	width: 90%;
	max-width: 1000px;
	margin:20px auto;
}

.main .articles {
		width: 68.5%;
		margin-right: 1.5%;
		float:left;
	}
	.main .articles article{
		padding: 20px;
		background: #fff;
		margin-bottom: 20px;
	}
  p.p-mid {
    padding: 20px;
  }

1
  • p.p-mid etcetera no dio resultado Commented el 10 ene. 2018 a las 21:39

Tu Respuesta

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

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