Foros del Web » Creando para Internet » CSS »

Posicionamiento float CSS

Estas en el tema de Posicionamiento float CSS en el foro de CSS en Foros del Web. Hola Buenas Tardes, hace 1 mes que estoy estudiando en mis ratos libres css y html y la verdad me gusta mucho lo que es ...
  #1 (permalink)  
Antiguo 21/02/2015, 20:19
 
Fecha de Ingreso: febrero-2015
Mensajes: 2
Antigüedad: 4 años, 9 meses
Puntos: 0
Posicionamiento float CSS

Hola Buenas Tardes, hace 1 mes que estoy estudiando en mis ratos libres css y html y la verdad me gusta mucho lo que es css. Estoy teniendo un problema y consta de lo siguiente:

Código:
<!doctype html>
<html>
    <head>
        <style>
            #articles{
                background: blue;
                min-width: 940px;
                max-width: 940px;  
                padding: 10px 10px;
                margin-bottom: 10px; 
                margin-left: auto;
                margin-right: auto;
                overflow: hidden;
            }

            article{
                float: left;
                width: 620px;
                background: green;
                height: 150px;
                margin-bottom: 10px;
            }

            aside{
                background: red;
                margin:0px; 
                width: 300px;
                height: 250px;
                float: right;
                box-sizing:border-box;
            }
        </style>
    </head>
    <body>
        <section id="articles">
            <article></article>
            <article></article>
            <article></article>
            <aside></aside>
        </section>
    </body>
</html>
Estoy queriendo que el cuadrado rojo (que vendria ser mi sidebar o aside) que se encuentre posicionado en la esquina superior derecha, y no logro posicionarlo correctamente.

Les agradeceria que me ayuden con esto, ya parece ser un tema sencillo, pero yo soy nuevo en css, he probado con float left, float right, clear:both y overflow:hidden.

Muchas gracias.
  #2 (permalink)  
Antiguo 22/02/2015, 03:34
 
Fecha de Ingreso: julio-2010
Ubicación: A Coruña
Mensajes: 505
Antigüedad: 9 años, 4 meses
Puntos: 60
Respuesta: Posicionamiento float CSS

No lo pongas de último, ponlo después del primer <article>
__________________
http://zeromm.es/
Diseñador Web | Experto en Responsive Design, CSS3 y Optimización Web.
  #3 (permalink)  
Antiguo 22/02/2015, 06:19
 
Fecha de Ingreso: febrero-2015
Mensajes: 2
Antigüedad: 4 años, 9 meses
Puntos: 0
Respuesta: Posicionamiento float CSS

Cita:
Iniciado por Zeromm Ver Mensaje
No lo pongas de último, ponlo después del primer <article>
Hola Zeromm, gracias por responder a la brevedad.

Esa es una posible solucion y soluciona a lo que he preguntado en primer lugar.

Ahora, si yo por ejemplo pongo 2 aside, lo que sucede es que me coloca uno al lado del otro, y eso es correcto ya que ambos tienen la propiedad de float:right. Lo que quiero lograr es que los dos recuadros rojos se posicionen uno abajo del otro, y a la derecha del section "articles", de la siguiente forma:

Código:
    <body>
        <section id="articles">
            <aside></aside>
            <aside></aside>
            <article></article>
            <article></article>
            <article></article>
        </section>
    </body>
Como puedo hacerlo? Muchas gracias desde ya.
  #4 (permalink)  
Antiguo 22/02/2015, 06:24
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.483
Antigüedad: 17 años, 4 meses
Puntos: 2111
Respuesta: Posicionamiento float CSS

Simplemente mételeos dentro de otro elemento y flota ese elemento:

Código HTML:
Ver original
  1. <div class="aside_container">
  2.   <aside></aside>
  3.   <aside></aside>
  4. </div>

Aunque tal vez sea más semántico hacer algo así:

Código HTML:
Ver original
  1.   <div></div>
  2.   <div></div>

Ya que no acaba teniendo demasiado sentido tener dos aside ahí.
__________________
Twitter: @zinhard

Tengo una web donde hago lo que quiero.

Etiquetas: alinear, body, columnas, float
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 16:38.