Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] [DUDA] Alinear correctamente article y aside (float)

Estas en el tema de [DUDA] Alinear correctamente article y aside (float) en el foro de CSS en Foros del Web. Buenas amigos. Aun soy algo novato con esto de CSS y en mi práctica de hoy me tope con algo que no se como resolverlo, ...
  #1 (permalink)  
Antiguo 05/11/2013, 22:31
Avatar de charlybinn  
Fecha de Ingreso: abril-2013
Ubicación: Sonora, Mex.
Mensajes: 26
Antigüedad: 11 años, 8 meses
Puntos: 1
Pregunta [DUDA] Alinear correctamente article y aside (float)

Buenas amigos. Aun soy algo novato con esto de CSS y en mi práctica de hoy me tope con algo que no se como resolverlo, no se si correctamente...


Estoy haciendo la estructura básica con las nuevas etiquetas de HTML5 y con CSS trato de acomodarlos correctamente, como en esta imagen:



En mi caso tengo el article algo mas grande y el aside pequeño, el problema que tengo es cuando el aside quiero ponerlo a la derecha del article. Al article lo pongo como un elemento flotante hacia la izquierda y el aside flotante a la derecha, el problema aqui es que el aside esta siempre algo mas abajo que el article, así:



para que estuvieran ambos al mismo nivel use margenes negativos pero no se si sea correcto hacer eso o si simplemente lo estoy haciendo mal, aquí esta mi codigo:

Código HTML:
<div id="contenedor">
		<article>
			<section>
				<h3>Siempre es bueno...</h3>
				<br>
				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.
			</section>
		</article>
		<br>
		<br>
		<aside class="bloque-derecha">
			<div class="titulo"> 
				<h3>Publicidad</h3> 
			</div>
			<section>
				<!--Aqui iran imagenes de publicidad-->
			</section>
		</aside>
	</div> 

Código:
#contenedor{
	/*background: #fba456;*/
	margin-top: 20px;
	overflow: hidden;
}


article{
	background: white;
	float: left;
	min-height: 500px;
	padding: 20px;
	text-align: justify;
	width: 70%;
}


.bloque-derecha{
	background: white;
	margin-top: -40px;
	float: right;
	width: 290px;
}

.bloque-derecha .titulo{
	background: #1d1d1d;
	color: white;
	height: 50px;
	line-height: 50px;
	text-align: center;
	width: 100%;
}


.bloque-derecha section{
	background: url('../img/anuncio.jpg') no-repeat;
	height: 250px;
	width: 100%;
}

les agradeciera que me ayudaran con esto, no me siento agusto avanzar si tener claro esto hehe
  #2 (permalink)  
Antiguo 05/11/2013, 23:55
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 9 meses
Puntos: 1146
Respuesta: [DUDA] Alinear correctamente article y aside (float)

y esos saltos de linea <br>?

cuando me hace ese efecto suelo invertir los elementos en el html
es decir primero pondría el <aside> y después el <article> en el html

por cierto es un blog verdad? si es una pagina de contenido no creo que debas usar <article> en su lugar usa un <div> o <main>
  #3 (permalink)  
Antiguo 06/11/2013, 02:17
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 4 meses
Puntos: 2114
Respuesta: [DUDA] Alinear correctamente article y aside (float)

Yo invertiría section y article, se me hace que están del revés.

En realidad con flotar ambos elementos a la izquierda es suficiente, aunque no está de más meter un div por ahí para tener un contenedor del sitio en si:

Código HTML:
Ver original
  1. <div id="contenedor">
  2.   <section>
  3.     <article></article>
  4.     <article></article>
  5.     <article></article>
  6.   </section>
  7.   <aside>
  8.   </aside>
  9. </div>

Código CSS:
Ver original
  1. div#contenedor {
  2.   width: 100%;
  3.   max-width: 1200px;
  4.   margin: 0 auto;
  5.   overflow: hidden;
  6. }
  7.  
  8. div#contenedor section {
  9.   float: left;
  10.   width: 70%;
  11. }
  12.  
  13. div#contenedor aside {
  14.   float: left;
  15.   width: 25%;
  16.   margin-left: 5%;
  17. }
  #4 (permalink)  
Antiguo 07/11/2013, 00:53
Avatar de charlybinn  
Fecha de Ingreso: abril-2013
Ubicación: Sonora, Mex.
Mensajes: 26
Antigüedad: 11 años, 8 meses
Puntos: 1
Respuesta: [DUDA] Alinear correctamente article y aside (float)

Gracias por responder, la verdad no se si estén invertidos pero si lo había pensado voy a probar sus ideas y ver que logro.

Etiquetas: article, float, flotantes, html5, margenes
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:31.