Problème positionnement colonne droite -css

Question

Etudiantecomm

23 Apr 2015 à 19:21

Bonjour à tous, j'ai un site web à créer pour valider ma licence. Je n'arrive pas à positionner correctement une colonne à droite. <br style="clear:both;"/> ET float:right; ne fonctionnent pas.
Pouvez vous m'aider, me proposer des solutions

Merci énormément!

Code :

INDEX.HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>festiloire</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div class="principale">

<div class="conteneur">
<div class="logo">
<img src="images/logo.png" />
</div>

<div class="slogan">
<img src="images/slogan.png" />
</div>
<br style="clear:both;"/>
</div>

<ul class="menu">
<li><a href="index.html">Home</a></li>
<li><a>Agenda</a></li>
<li><a>Actu</a></li>
<li><a>Zoom</a></li>
<li><a>Team</a></li>
</ul>

<div class="conteneur">

<div class="left">

<div class= "article-1">
<img src="images/chat.png"/>
</div>

<div class= "article-2">
<img src="images/oiseau.png"/>
</div>

<div class= "article-3">
<img src="images/chien.png"/>
</div>

<br style="clear:both;"/>

</div>

<div class="right">

</div>
<br style="clear:both;"/>

</div>

</div>

</body>

</html>

styles css

* RESET */
@charset "utf-8";
* {margin:0; padding:0; list-style-type:none; border:0;}

.active {
background:white;
color:white;
}

/* STYLES CSS */

/** OSSATURE **/

.principale {
width:1000px;
height:800px;
margin:20px auto 0px auto;
background: white;
}

.conteneur {
width:100%;

}

/** BANNIERE **/
.logo {
width:154px;
height:154px;
float:left;
}

.slogan{
width:350px;
height:78px;
float:left;
margin:76px 413px 20px 83px;
}

.menu {
height:42px;
padding-top:10px;
padding-bottom:10px;
padding: 0px 80px 0px 80px;
}

.menu li {
display :inline;
width: 128px;
}

.menu a {
width:128px;
height:42px;
font-family:Cheddar Jack;
color:black;
font-size:38px;
text-decoration:none;
margin:0px 50px 0px 50px;
border: 1px #ef8f25 solid;
border-radius: 10px;
}
.menu a:hover{color:white; background: #ef8f25}

.left {
width: 670px;
height: 584px;
background: #f9d8b3;
margin: 26px 0px 30px 0px;
padding: 10px 0px 10px 0px;
}

.article-1{
width: 610px;
height: 260px;
background: white;
margin : 10px 30px 10px 30px;
}

.article-2{
width: 284px;
height: 250px;
background: white;
margin : 28px 42px 10px 30px;
float: left;
}

.article-3{
width: 284px;
height: 250px;
background: white;
margin : 28px 30px 10px 0px;
float:right;
}

.right{
width:330px;
height:528px;
float:right;
background: red;
}

katystp

23 Apr 2015 à 20:22

Vite comme ça, je définirais la largeur des div left et right en pourcentage plutôt qu'en pixels.
Comme 45% 45%

Ensuite, je définirais leur propriété Display à la valeur inline-block.

D'habitude, ça se fait assez simplement.

Ha et personnellement, je n'ai jamais utilisé ce code : style="clear:both;
À quoi sert la propriété clear ?

Olivier C

connecté

26 Apr 2015 à 07:14

Bonjour,

Si vous souhaitez une réponse appropriée une page de test reste la meilleure solution. Vous pouvez la créer sur CodePen par exemple.

JENCAL

27 Apr 2015 à 12:13

katystp a écrit :

Ha et personnellement, je n'ai jamais utilisé ce code : style="clear:both;
À quoi sert la propriété clear ?

clear both c'est pour éviter que deux éléments soient cote a cote.

JENCAL

27 Apr 2015 à 12:15

rajoute un float : left ici


.left {
  width: 670px;
  height: 584px;
  float: left;
  background: #f9d8b3;
  margin: 26px 0px 30px 0px;
  padding: 10px 0px 10px 0px;

exemple : https://jsfiddle.net/324n9pu0/1/

après tu adapte.
Modifié par JENCAL (27 Apr 2015 - 12:17)

Sujet clos

CSS et mise en forme, CSS3

Problème positionnement colonne droite -css