dos colummnas en CSS3, primero la derecha!

suntus · #1 (**permalink**) 07/02/2012, 16:20

Hola a todos

veran.. Tengo un problema con mi codigo CSS, actualmente se ve bien pero quiero cambiar el orden de los textos en el html y para ello tengo que modificar mi CSS

html5

Código:

<!DOCTYPE HTML>
<html lang="es">
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="/css/styles.css" />
	</head>
	<body>
		<header>
			<h1></h1>
			<p></p>
			<h2></h2>
			<p></p>
		</header>

		<nav>
		</nav>

		<aside>
AQUI EL TEXTO A LA DERECHA
		</aside>

		<section>
			<article>
AQUI EL TEXTO A LA IZQUIERDA
			</article>
		</section>
	</body>
</html>

y como quiero dejarlo

Código:

<!DOCTYPE HTML>
<html lang="es">
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="/css/styles.css" />
	</head>
	<body>
		<header>
			<h1></h1>
			<p></p>
			<h2></h2>
			<p></p>
		</header>

		<nav>
		</nav>

		<section>
			<article>
AQUI EL TEXTO A LA IZQUIERDA
			</article>
		</section>

		<aside>
AQUI EL TEXTO A LA DERECHA
		</aside>
	</body>
</html>

El motivo de cambiar asi es por que la parte <aside> no es interesante para los buscadores, asi que paso de que este arriba del todo.

EL CSS3 actual

Código:

article {
width : 550px;
padding : 10px;
margin-left : 0px;
}

aside {
width : 249px;
padding-right : 30px;
padding-top : 10px;
float : right;
}

no consigo modificar el CSS para que funcione con la segunda opcion del html5, si algun almaaa caritativa me hecha una mano y explica un poco el asunto de las columnas estaria genial :(

un saludo y gracias a todos.

cristian_cena · #2 (**permalink**) 08/02/2012, 02:27

Cita:

El motivo de cambiar asi es por que la parte <aside> no es interesante para los buscadores...

No soy experto en seo pero me animo a decir que el orden/ubicación de elementos no influye en la valoración de los buscadores.
Por otra parte, es común (salvo para los árabes creo) leer de izquierda a derecha y de arriba hacia abajo, de hecho, el flujo de documento se forma de esta manera.
Cuando flotes cajas siempre controlá de anidar las columnas a un contenedor. Al contenedor le debes aplicar overflow:hidden y a las columnas float:[left/right].

Código CSS:

Ver original.cols{ width: ...;  overflow: hidden; /* etc */ }
.cols section, .cols aside { float: left; }
.cols section{ width: ...;  /* etc */ }
.cols aside { width: ...;  /* etc */ }

Código HTML:

Ver original<div class="cols">
<section><article>texto izquierda</article></section>
<aside>texto derecha</aside>
</div>

Saludos

pd: float es una propiedad css2. También podes aprovechar la propiedad (ie8+) display:table. Css3 tiene a column-count.