No puedo hacer que el main y el aside se alineen. Uno me queda debajo del otro, en lugar de al lado.

Rubén Cuello

Pregunta

student•hace 5 años

Esteban Casallas

student•hace 5 años

jaja así es, mas adelante veras responsive y todo eso soluciona de una forma bella todos esos problemas !!

Rubén Cuello

student•hace 5 años

Gracias. Ahora pruebo. Noto que al cambiar las dimensiones de la ventana se deforma todo. jaja. Crei que al trabajar con vh ,vw y porcentajes esas cosas no iban a pasar.

Esteban Casallas

student•hace 5 años

No te preocupes, manejar las medidas así es difícil, por eso existen propiedades como auto que solucionan esto !!

Rubén Cuello

student•hace 5 años

Perdón debí aclarar ese detalle antes: Al principio intenté simplemente hacer que el ancho del aside y del main sumaran 100%. Como no tenía ni margin, padding etc, pensé que no había problemas. Al poner 25 y 75 los width respectivamente uno de los contenedores (el main) ya no se ponía al lado, sino que iba a un nivel diferente. Por eso le resté una muy pequeña parte del width a uno de los contenedores.

Esteban Casallas

student•hace 5 años

No vi el código antes de comentar, bueno el width es el causante, si revisas el aside lo tienes en 24.7% y el main en 75% la linea es por el .3 % restante, hay varias formas de arreglarlo, puedes poner el aside en 25 y el main en auto, y colocarlos ambos dentro de un div, saludos !!

Esteban Casallas

student•hace 5 años

Bro es difícil poder ayudarte así, lo que te recomiendo es usar devTools, Platzi tiene un curso 5 ⭐ de esta herramienta: https://platzi.com/clases/devtools/

Rubén Cuello

student•hace 5 años

<!DOCTYPE html>
<html>
<head>
	<title></title>

<style>
	*
	{
		box-sizing: border-box;
		margin: 0;
		padding: 0;

	}

	main
	{
		background-color: #FA4D4D;
		width: 75%;
		height: 77vh;
		display: inline-block;
		vertical-align: middle;
		align-items: middle;

	}

	aside
	{
		background-color: #6FADE6;
		width: 24.7%;
		height: 77vh;
		display: inline-block;
		vertical-align: middle;
		align-items: middle;
	}

	header
	{
		background-color: #85B587;
		height: 15vh;

		
	}

	footer
	{
		background-color: #CDBF9F;
		height: 8vh;
		font-size: 1.2rem;
		padding: 10px;
		text-align: right;
	}

	.parrafo
	{
		background-color: #CEBEFC;
		margin:10px;
		padding: 20px;
		font-size: 0.9rem;
		border-radius: 3px;
	}

	.nav li
	{
		display: inline-block;
		float: right;
		padding: 10px;
		font-size: 1.1rem;
	}

	.logo
	{	
		font-size: 1.5rem;
		padding: 10px;

	}

	main p
	{
		font-size: 1.1rem;
		font-family: Verdana;
		padding: 10px;
	}

</style>


</head>
<body>
	<header>
		<p class="logo">Logo</p>
		<ul class="nav">
			<li>Home</li>
			<li>Cursos</li>
			<li>Instructores</li>
			<li>Blog</li>
		</ul>
	</header>

	<aside>
		<div class="parrafo">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
		</div>
		<div class="parrafo">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
		</div>
		<div class="parrafo">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
		</div>
		<div class="parrafo">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
		</div>
	</aside>

	<main>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</main>

	<footer>
		<p>Footer con muy poca imaginación</p>
	</footer>
</body>
</html>```

Luis Lira

student•hace 5 años

Podrías pasar tu código para poder revisar el otro error que estás teniendo?

Rubén Cuello

student•hace 5 años

Ya lo solucioné. Tenía un error muy tonto. Tengo casi terminado el desafío. Único inconveniente ahora: El aside y el main tienen una linea vertical, un espacio en blanco separándolos. No tengo ni margin, ni padding, ni border, ni nada parecido. No se que genera ese espacio. Ni tampoco se como quitarlo.

Esteban Casallas

student•hace 5 años

Hola, compártenos tu código para poder ayudarte, adjunto tuto:

No puedo hacer que el main y el aside se alineen. Uno me queda debajo del otro, en lugar de al lado.

Curso de HTML y CSS [Empieza Gratis]

Curso de HTML y CSS [Empieza Gratis]