CSS - Posicionamiento float CSS

   
Vista:

Posicionamiento float CSS

Publicado por juanrob2015 (1 intervención) el 22/02/2015 03:31:48
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:

ejemplo1

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. Lo que quiero hacer es dejarlo de esta manera:


ejemplo2

La segunda foto la edite con paint para que se entienda la idea.

El codigo html es el siguiente:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!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>

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.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Posicionamiento float CSS

Publicado por xve (352 intervenciones) el 23/02/2015 07:24:27
Hola JuanRob, para que te funcione, tienes que sacar el <aside> de dentro de los articulos y englobar de alguna manera los articulos y el aside... yo he utilizado un div para este ejemplo... aqui lo tienes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!doctype html>
<html>
    <head>
        <style>
            #pagina{
                background: blue;
                min-width: 940px;
                max-width: 940px;
                padding: 10px 10px;
                margin-bottom: 10px;
                margin-left: auto;
                margin-right: auto;
                overflow: hidden;
            }
 
            #articles {
                float:left;
                width:620px;
            }
 
            article{
                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>
        <div id="pagina">
            <section id="articles">
                <article></article>
                <article></article>
                <article></article>
            </section>
            <aside></aside>
        </div>
    </body>
</html>

Coméntanos si te sirve, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

Posicionamiento CSS

Publicado por Julio (1 intervención) el 04/09/2015 21:15:10
Que tal vi el post y me agrado la respuesta solo que quisiera que me pudieran apoyar para realizar lo siguiente en html
Datos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar