[Résolu] pb placement du liseret par EniRog - page 1

bonsoir

j'ai un souci avec le placement du liseret , je n'arrive pas à le placer vraiment au coin de la page , et quand je le positionne en 'absolute' ,les autres blocs passent en dessous , du coup je coince un peu là .

qqle q un aurait une explication ou une petite aide , merci.

voila mon html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
    <link rel="stylesheet" href="style1.css" />
		<title>curriculum vitae</title>
	</head>
	<body>
	 <aside id="bande"></aside>
	
			<div id="page">

                   
                   
                <header>
	 	        <h1> edi ruini</h1> 
	 	         <p > graphiste , illustrateur  <br /><img src="image/laurel1.jpg" alt="moi c'est laurel" title="un ami de hardy" /> </p> 
	 	         </header>

	 	  
	 	      
              <section>
                   <div>
                    <h2> <span class="experience">mon experience</span> </h2>
                      <ul > 
         	              <li><strong>de 2011 à 2015 </strong> : graphiste à casino </li>
                         <li><strong>de 2015 à 2017 </strong> : graphiste freelance  </li>
                      </ul> 
                      </div>
                      <div>
                    
            	   
                     <h2><span class="competences"> mes compétences</span></h2>
                        <ul> 
          	              <li> photoshop cs6</li>
          	              <li> illustrator cs5 </li>
          	              <li> indesign </li>
          	              <li> after effect cs5 </li>
          	              <li> peinture :<em><strong>gouache</strong></em> et <em><strong>acrilyque</strong></em> </li>
                        </ul>
                        </div>
                        <div>
             		                   
                       <h2> <span class="Formation">Ma Formation</span></h2>
                        <ul> 
         	              <li><strong>de 2006 à 2011 </strong> : <a href="http://www.ensba-lyon.fr/" target="_blank">beaux arts de Lyon </a>, option communication.</li>
         	              <li><strong>de 2004 à 2006 </strong> : école <a href="http://www.cohl.fr/" target="_blank"> <strong>emile cohl</strong>  </a><mark>( pompe à fric )</mark>, option illustration </li>
                        </ul>
                        </div>
                       
                    </section>
                    </div>
                
	</body>


</html>

et mon css

#page
{
	display: flex;
	
	flex-direction: column;
	align-items: center;


}
section
{
	display: flex;
	justify-content: space-between;
	width: 80%;
	margin: auto;
	

}

#bande
{
	width: 8%;
	height: 900px;
	margin: 0px;
	padding: 0px;
	background-color: grey;
	float: left;
	border-radius: 10px 5px 10px 5px;
}

merci

EniRog

24 mai 2017 à 21:29:43