alinear texto

[punegas]

Hola vereis, tengo un problema que parece estúpido pero yo no consigo que funcione. Lo que quiero hacer es esto:

| TextoTexto texto texto texto | Las líneas verticales son el borde del div.
| TextoTexto texto texto texto |
| TextoTexto texto texto texto |
| ----------------------- |
| opcion1 --------- opcion 2 | Estas malditas opciones no consigo ponerlas en su sitio.
| ----------------------- | Las lineas horizontales son espacios en blanco.

Pues vereis, he probado poniendo 2 párrafos, un párrafo dentro de otro, un div dentro de otro, un div dentro de un párrafo, una lista, etiquetas span, y no hay manera.
El mejor resultado lo he conseguido haciendo esto

p.opciones{

display:block;

}

span.opcion2{

margin-left:50%;

}

<p class="opciones"> opcion 1 <span class="opcion 2"> opcion 2 </span> </p>

El problema de esto es que si cambia la resolución de pantalla se deshace el encanto.

Si le das text-align:right al span no va, claro, y con float:right, solo va en opera, en mozilla y explorer hace cosas raras, para variar.

¿Alguien lo ha hecho y le ha funcionado de alguna manera, para cualquier resolución de pantalla?

[AlvaroG]

podés hacerlo con 2 párrafos usando "clear" y "float":

Código:

parrafo1 {
    float : left;
    clear : left;
    width : 40%; /* por ejemplo */
}

parrafo2 {
    float : right;
    clear : right;
    width : 40%;
}

Saludos

[punegas]

Hola alvin, muchas gracias por tu respuesta, pero tampoco me ha funcionado. Creo q funcionaria si no hubiera nada debajo de los párrafos. Pero al haber otras capas, pues los párrafos se ponen encima de ellas. He probado haciendo un float:clear a las capas inferiores pero no me va. Bueno, no es algo que afecte a la funcionalidad de la página, pero molesta bastante querer hacer algo y verte incapaz de hacer que salga.
Si a alguien se le ocurre cómo hacerlo, pues bienvenida su respuesta, si no, espero q no os pase porque os rompereis la cabeza.
Nuevamente gracias alvin. Hasta otra!!

[cleft]

Mano, si fuese posible que hicieses algun dibujo aunque sea en paint para ilustrar mejor lo que deseas conseguir...
En lo personal no me quedo claro cuantas capas deseas crear.
Si solo es la parte de opcion 1 y 2, entonces seria algo asi:

Markup:

Código:

<div id="container">
	<div class="option">
		...contenido...
	</div>
	<div class="option last">
		...contenido...
	</div>
	<div class="clear"><span></span></div>
</div>

CSS:

Código:

#container {
	width: 420px;
	}

#container option {
	float: left;
	margin-right: 20px;
	width: 200px;
	}

#container .last {
	margin-right: 0px;
	}

#container .clear {
	clear: both;
	}

(Aunque aqui habria que tomar en cuenta el bendito bug del Box Model en IE.)
Bueno, en si, hay muchas maneras de hacer algo. Tambien podrias flotar el un div a la izquierda y otro a la derecha, etc.

Tal vez entendi mal lo que deseas conseguir...

[punegas]

Primero, muchísimas gracias por el tiempo que os tomais en leer y atender a las peticiones de la gente. Y ahora, las imagenes:

La imagen de arriba corresponde a como lo tengo actualmente, pero quiero que el delete aparezca pegado a la derecha, y si lo hago, al cambiar la resolución, crea otra linea, y la de abajo a lo que pasa cuando hago el float:right.




Lo que se muestra por pantalla es el resultado de una consulta sql a una base de datos, que muestra los resultados para que el usuario pueda modificarlos o borrarlos. Aqui os paso el código:

<div id="consultar">

<!--Aquí se realiza la carga del contenido de la sección que ha seleccionado el usuario-->
<h4>Section content</h4>

Código PHP:

  <?php
 
include("conexion.php");
//Conexion devuelve la variable $link con la base de datos sobre la que trabajar
 
$resultado = mysql_query('select * from home order by fecha_home desc', $link);
                
while( $fila = mysql_fetch_array($resultado) ){
 
$contador++;
 
//Aqui empieza la escritura del div en el que quiero meter el texto alineado.
printf('<div id="elemento">
 
<h3>%s</h3>
<h6>%s</h6>
<p>%s</p>
<p>Fecha de escritura: %s</p>
 
//Aqui está el maldito texto que me causa problemas
<p class="actualizarbbdd"><a href="menuModificarRegistro.php?id=%d">Modify this register</a>
<span class="borrar"><a href="borrarRegistro.php?id=%d">Delete this register</a></span></p>
</div>',
                            $fila['titular_home'],$fila['encabezado_home'],$fila['noticia_home'],$fila['fecha_home'],$fila['id_home'],$fila['id_home']);                    
}
 
if ( $contador == 0 ){
 
echo "<p>La tabla está vacía.</p>";
                
}
 
include("desconexion.php");
?>   

</div>

El texto con el que tengo problemas es el que está dentro del <div id="elemento">

He probado metiendo el texto en un div nuevo y alinearlo a la derecha, pero no va.

No crei que fuera a dar tantos problemas, asi que si has leido hasta aqui, pues muchas gracias.

[cleft]

A como entiendo, esta es la parte que te da problemas:

Código:

<p class="actualizarbbdd">
<a href="menuModificarRegistro.php?id=%d">Modify this register</a>
<span class="borrar"><a href="borrarRegistro.php?id=%d">Delete this register</a></span>
</p>

Asi que, prueba lo siguiente:

Código:

p.actualizarbbdd {
background: #EEE; /* Este lo agregue solo para que verifiques que los enlaces se encuentran dentro del p */
height: 30px; /* opcional, el que desees */
width: 100%;
}

Aplicale clases a tus hipervinculos. No creo que necesites mas el <span>

Markup:

Código:

<a href="..." class="modify">Modify this register</a>
<a href="..." class="delete">Delete this register</a>

CSS:

Código:

a.modify {
	display: block; /* Estos block van por si deseas agregar padding, margin, etc */
	width: auto;
	float: left;
	}

a.delete {
	display: block;
	width: auto;
	float: right;
	}

Bueno, tal vez no es el mejor codigo, creo que podrias simplificarlo un poco mas. La idea es que definas clases para ambos <a> y flotes uno a la izquierda y otro a la derecha.
Nos avisas.

[punegas]

Bueno bueno bueno, ha funcionado!!!!

Muchas gracias a todos por molestarse y sobre todo a cleft, porque me has dado la solución. Buenísimo. Muchas gracias de nuevo.