Positionner la balise <aside>

Version imprimable

Bonjour,
Je suis actuellement entrain de construire un site internet pour le présenter lors de mon examen en BTS Tourisme, cependant je rencontre un problème avec les balises <aside>.
Je voudrai les placer à droite en alignement horizontal avec mes blocs <article> cependant ces dernières se placent en dessous et sont donc cachées par le contenu des balises <article>. J'ai essayé d'utiliser les fonction <div>, float etc et ça ne fonction pas. Je cherche depuis la fin du mois de décembre et j'ai un professeur peu compétent qui ne parvient pas à m'aider...
Pourriez-vous m'aider à résoudre ce problème ?
Je vous en serai très reconnaissante.

Merci.

Mon HTML :

Code:

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
<section>
	<article>
		<p>Ce site internet a été conçue afin de pouvoir présenter mes différents travaux lors des épreuves orales du BTS Tourisme mais également pour servir de support et de travail pour l'épreuve orale de la matière intitulée Gestion de l'Information Touristique (GIT)  dont j'ai choisi la spécialité multimédia.</p>
	</article>
	<aside>
		<p>Située dans le département du Calvados en Basse-Normandie, la cité scolaire André Maurois se trouve au centre de la station balnéaire de Deauville.<br> Elle accueil un collège, un lycée et une section BTS Tourisme composée d'une classe de première année et une classe de deuxième année.</p>
	</aside>
</section>
<section>
	<article class="image">
		<figure>
			<img src="images/panneaulycee.jpg" alt="photo panneau lycée"style="margin-right: 7px;"/>
			<figcaption style="width:300px;margin-left:15px;text-align:center;font-size:75%;">Panneau De la cité scolairee André Maurois de Deauville</figcaption>
		</figure>
		<figure>
			<img src="images/logobts.jpg" alt="logo du BTS tourisme du Lycée André Maurois de Deauville"style="margin-right: 7px;"/>
			<figcaption class="logo" style="width:300px;margin-left:15px;text-align:center;font-size:75%;">Logo du BTS Tourisme D'André Maurois</figcaption>
		</figure>
		<figure>
			<img src="images/vueaeriennelycee.jpg" alt="vue aérienne du lycée"/>
			<figcaption style="width:300px;margin-left:15px;text-align:center;font-size:75%;">Vue aérienne du lycée André Maurois </figcaption>
		</figure>
	</article>
	<aside style="margin-left:265px;">
		<figure>
			<img src="images/qrcodesitemaurois.png" alt="QR code lycée maurois" style="width: 140px;"/>
		</figure>
		<figure>
		</figure>
	</aside>
</section>

Mon CSS :

Code:

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
49
50
51
52
53
54
55
56
57
section{
	width:1050px;
	height:226px;
	display:inline-block;
	vertical-align:top;
}
aside{
	width:138px;
	font-family: Indie Flower;
	font-size:100%;
	text-align:center; 
	border-style: solid;
	border-width: 2px;
	border-color:#ABD0FF;
	border-radius:10px;
	margin-right:50px;
	margin-left:20px;
	padding:2px;
	padding-left:5px;
	background-color:#003E8E;
	padding-left:15px;
	padding-right:15px;
	left:250px;	
	color:#ABD0FF; 
	float:right;
}
article{
	font-family: Indie Flower;
	font-size:150%;
	border-style: solid;
	border-width: 2px;
	border-color:#ABD0FF;
	border-radius:10px;
	position:relative;
	background-color:#7CB5FF;
	width:1000px;
	margin-left:15px;
	padding-left:15px;
	padding-right:15px;
	text-align:justify;	
	color:#003E8E; 
}
figure {
    display: inline-block;
	vertical-align:top;
	margin:0px;
}
figure img {
    vertical-align: top;
	margin:0px;
}
figure figcaption {
    text-align: center;
}
.image{
	padding:0px;
}

Bonjour,
Je me permets une proposition en modifiant la structure (j'ai beaucoup réduit le code pour l'exemple) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
article {
  float: left;
  width: 65%;
  margin-right: 1%;
}
section {
  background: #abc;
}
p {
  margin-top: 0;
}
aside {
  float: left;
  width: 33%;
  background: #def;
}

Code:

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
<!DOCTYPE html>
<html dir="ltr" lang="fr-FR">
<head>
  <meta charset="UTF-8" />
  <title>Accueil - Mon site</title>
</head>
<body>
<article>
  <section>
    <p>Ce site internet a été conçue afin de pouvoir présenter 
mes différents travaux lors des épreuves orales du BTS Tourisme 
mais également pour servir de support et de travail pour l'épreuve orale 
de la matière intitulée Gestion de l'Information Touristique (GIT) 
dont j'ai choisi la spécialité multimédia.</p>
  </section>
  <section>
    <figure>
      <img src="images/panneaulycee.jpg" alt="" />
      <figcaption >Panneau de la cité scolaire André Maurois de Deauville</figcaption>
    </figure>
    <figure>
      <img src="images/logobts.jpg" alt="" />
      <figcaption class="logo">Logo du BTS Tourisme D'André Maurois</figcaption>
    </figure>
    <figure>
      <img src="images/vueaeriennelycee.jpg" alt=""/>
      <figcaption>Vue aérienne du lycée André Maurois </figcaption>
    </figure>
  </section>
</article>
<aside>
  <p>Située dans le département du Calvados en Basse-Normandie, 
la cité scolaire André Maurois se trouve au centre de la station balnéaire de Deauville.
  <br />Elle accueil un collège, un lycée et une section BTS Tourisme 
composée d'une classe de première année et une classe de deuxième année.</p>
  <a href="http://www.etab.ac-caen.fr/maurois/"><img src="images/qrcodesitemaurois.png" alt="www.etab.ac-caen.fr/maurois" /></a>
</aside>
</body>
</html>

24/01/2015, 21h11
btstour

2 pièce(s) jointe(s)

Bonsoir,
merci pour votre aide j'ai essayé le code que vous m'avez envoyé cependant cela ne marche toujours pas.

J'obtiens ceci :

Pièce jointe 167174

Et j'aimerai si possible obtenir quelque chose du genre :

Pièce jointe 167173
24/01/2015, 23h53
Muchos

Je vous propose de jeter un œil à une démo que j'ai réalisée : Une mise en page responsive sur trois colonnes.
Peut-être que le code source vous mènera vers une solution. Pour ma part, je ne saurais pas travailler avec votre code HTML actuel.

ps: Vous devriez peut-être supprimer la référence à votre prof dans votre premier message :D
25/01/2015, 00h09
btstour

Quel code HTML auriez-vous besoin pour pouvoir m'aider ?
Je commence vraiment à désespérer d'arriver un jour à avoir se que je veux ='(

Euh non je ne la supprimerai pas ça montre à l'éducation nationale que mettre un prof de math pour faire de l'informatique ce n'est pas judicieux surtout quand ce dernier préfère corriger ses copies que faire semblant de nous aider ><

Fin bref en tout cas merci d'essayer de m'aider :)

Voici rapidement une structure et css donnant le résultat attendu :

Code:

1
2
3
4
5
6
.col1, .col3{width:20%;display:inline-block;vertical-align: top;padding-top:112px;}
.col2{width:55%;display:inline-block;vertical-align: top;}
#titre{height:100px;}
#titre, nav, aside, article{border:1px solid #000;} 
aside{margin-bottom: 20px;}
article{margin-top:10px;}

Code:

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
<body>
    <div class="col1">
        <nav>
            nav nav nav nav nav nav nav nav nav nav nav nav nav nav nav nav 
            nav nav nav nav nav nav nav nav nav nav nav nav nav nav nav nav 
            nav nav nav nav nav nav nav nav nav nav nav nav nav nav nav nav 
        </nav>
    </div>
    <div class="col2">
        <div id="titre">
            titre titre titre titre titre titre titre titre titre titre titre 
            titre titre titre titre titre titre titre titre titre titre titre 
        </div>
        <article>
            article 1 article 1 article 1 article 1 article 1 article 1 article 1 article 1 article 1 article 1 
            article 1 article 1 article 1 article 1 article 1 article 1 article 1 article 1 article 1 article 1 
        </article>
        <article>
            article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 
            article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 
        </article>
    </div>
    <div class="col3">
        <aside>
            aside 1 aside 1 aside 1 aside 1 aside 1 aside 1 aside 1 aside 1 aside 1 aside 1 
            aside 1 aside 1 aside 1 aside 1 aside 1 aside 1 aside 1 aside 1 aside 1 aside 1 
        </aside>
        <aside>
            aside 2 aside 2 aside 2 aside 2 aside 2 aside 2 aside 2 aside 2 aside 2 aside 2
            aside 2 aside 2 aside 2 aside 2 aside 2 aside 2 aside 2 aside 2 aside 2 aside 2 
        </aside>
    </div>
</body>

25/01/2015, 15h23
btstour

Génial j'ai enfin réussi à avoir se que je voulais merci beaucoup numew =D
Après quelque modification j'arrive au résultat attendu =)