Alinear 2 divs a la derecha y juntos

doylelives · #1 (**permalink**) 23/06/2009, 14:04

Hola a todos!
Soy nuevisimo en CSS, bah soy programmer pero empecé con css y me sorprendió lo poderoso que es

En un div (principal) tengo 2 div (div1, div2).
Los cuales quiero alinear hacia la derecha en este orden:
_____________________________
. . . . . . . . . . . ._______________ |
. . . . . . . . . . . .|Div1 . . | . . Div2|
. . . . . . . . . . . .|_______|_______|
_____________________________|

Como logro esto??

oscarza · #2 (**permalink**) 23/06/2009, 14:18

creo que poniendolelos 2 divs :
float:right;

y margin-left:#px;
al primer div

doylelives · #3 (**permalink**) 23/06/2009, 14:36

No funcionó, bueno los alinea a la derecha pero no en el orden Div1-Div2 sino Div2-Div1

Código PHP:

  <div style="background-color:#CCCCCC">

    <div style="float:right;margin-left:19px;">DIV11</div>

    <div style="float:right">DIV22</div>                                  

</div>

Cuando dices margin-left:#px el numeral es cualquier numero, no??

kseso? · #4 (**permalink**) 23/06/2009, 14:50

Mira a ver si lo siguiente te inspira.
Por cierto, el orden en que los escribes en el html es muy importante.

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>Interferencias by Rafael</title>
 
<style type="text/css">
* {margin: 0; border: 0; padding: 0; outline: none; position: relative;}
body {background:#000;}
#derecha_del_todo, #derecha_pero_a_la_izquierda {
  float: right;
  margin-left: 10px;
  width: 250px;
  height: 250;
  padding: 10px;
}
#derecha_del_todo {background: #660;}
#derecha_pero_a_la_izquierda {background: #f60;}
 
</style>
</head>
<body>
<div id="derecha_del_todo">
el que está a la derecha del que está a la izquierda según miras
</div>
<div id="derecha_pero_a_la_izquierda">
el que está a la izquierda del que está a la derecha según miras
</div>
  </body>
</html>

Un saludo

AlbertoGarcia · #5 (**permalink**) 23/06/2009, 14:56

Sin cambiar cambiar la posición de los elementos en el flujo del documento html (esto no siempre es aconsejable o posible), puedes meter los dos divs dentro de un div flotado a la derecha y a estos dos divs los flotas a la izquierda para que no inviertan su posición en el flujo.

Salud!

doylelives · #6 (**permalink**) 23/06/2009, 15:20

Aaahhh!
Si eso tiene sentido, los va agregando a la derecha en el orden en que son creados...

Gracias chicos, de a poco me iré despidiendo de los tables.

kseso? · #7 (**permalink**) 23/06/2009, 15:26

Cita:

Iniciado por doylelives

Aaahhh!
Si eso tiene sentido, los va agregando a la derecha en el orden en que son creados...

Gracias chicos, de a poco me iré despidiendo de los tables.

Los coloca a la derecha en el espacio que queda libre, hasta que se termina y entonces pasaría a la siguiente "línea".

Un saludo