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

[charlybinn]

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

[ArturoGallegos]

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>

[pzin]

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:

<div id="contenedor">
  <section>
    <article></article>
    <article></article>
    <article></article>
  </section>
  <aside>
  </aside>
</div>
 

Código CSS:

div#contenedor {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}
 
div#contenedor section {
  float: left;
  width: 70%;
}
 
div#contenedor aside {
  float: left;
  width: 25%;
  margin-left: 5%;
}
 

[charlybinn]

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.