Can someone help me place the picture under the green container and align it horizontally based on the width of the green container? Any suggestions on how to achieve this would be greatly appreciated. Thank you!
Check out the demo at http://jsfiddle.net/29cz81du/
HTML:
<div id="carte-des-soins">
<ul>
<li><span class="menu-items"><a href="#" data-region="soins-1">Visage</a></span>
</li>
<li><span class="menu-items"><a href="#" data-region="soins-2">Epilation</a></span>
</li>
<li><span class="menu-items"><a href="#" data-region="soins-3">Mains</a></span>
</li>
<li><span class="menu-items"><a href="#" data-region="soins-4">Pieds</a></span>
</li>
<li><span class="menu-items"><a href="#" data-region="soins-5">Corps</a></span>
</li>
</ul>
</div>
<div id="container-des-soins">
<div id="soins-1" class="textzone">
<div class="desc-box clearfix">
<p class="desc-box-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<img class="type-de-soins" src="http://lorempixel.com/output/city-q-g-267-204-7.jpg">
</div>
<div class="carte clearfix">
<div class="desc-soins">
<p><strong>PHYT'S : soin visage Equilibre </strong>
<br>60 min. </p>
<p>Type de peaux : toute peau à équilibrer (grasse, mixte ou sèche). Soin du visage traditionnel, personnalisé selon le type de peau, qui vous fera retrouver une peau saine et un teint éclatant. </p>
<p><strong>PHYT'S : soin visage Pureté active</strong>
<br>60 min. </p>
<p>Type de peaux : peaux grasses ou mixtes comédogènes. Soin spécifique visant à assainir le teint, éliminer les comédons et aider à réguler les excès de sébum. Ce soin s’effectue, de préférence par cure de 4 soins avec l’application au préalable
d’une crème spécifique pendant quelques jours. </p>
<p><strong>PHYT'S : soin visage Aqua Phyt's
</strong>
<br>75 min. </p>
<p>Soin très hydratant à l'Acide Hyaluronique d'origine végétale </p>
<p><strong>PHYT'S : soin visage Capyl
</strong>
<br>60 min. </p>
<p>Type de peaux : peaux sèches à rougeurs diffuses, sensibles, fines. Soin calmant et décongestionnant, spécialement conçu pour les peaux sensibles ou à rougeurs diffuses. </p>
</div>
</div>
</div>
CSS:
/* CARTE DES SOINS */
#carte-des-soins {
text-align: center;
margin-top: 40px;
}
#carte-des-soins ul {
list-style: none;
padding:0;
}
#carte-des-soins li {
display: inline-block;
margin: 0 10px;
background: red;
}
#carte-des-soins li a {
color: #fff;
text-decoration:none;
text-align:center;
padding: 20px;
background: #474032;
transition: background-color 0.5s ease;
}
#container-des-soins {
margin-right: auto;
margin-left: auto;
width: 90%;
}
#soins-1,
#soins-2,
#soins-3,
#soins-4,
#soins-5 {
position: relative;
float: left;
margin-top: 30px;
margin-bottom: 30px;
padding: 5px 20px 20px 20px;
color: #333;
font-weight: 400;
line-height: 1px;
}
#soins-2,
#soins-3,
#soins-4,
#soins-5 {
display: none;
}
#soins-2 p {
margin-bottom: 5px;
}
#soins-1 p {
margin-bottom: 5px;
padding-right: 10px;
}
#soins-1 a {
color: #3A7CDB;
text-decoration: none;
}
#soins-1 a:hover {
text-decoration: underline;
}
.carte p {
margin-bottom: 1em;
}
.carte {
float: right;
width: 55%;
background-color: red;
padding-top: 25px;
}
.desc-box {
position: relative;
z-index: 1;
width: 40%;
float: left;
background-color: green;
}
.desc-box-text {
float: left;
padding-top: 25px;
padding-right: 25px;
padding-bottom: 25px;
padding-left: 25px;
font-weight: 400;
line-height: 1.38;
color: rgb(0, 0, 0);
}
.desc-soins {
float: left;
font-weight: 400;
line-height: 1.38;
color: rgb(0, 0, 0);
}
.type-de-soins {
display: block;
position: relative;
margin: 0 auto;
z-index: 4;
width: 179px;
height: auto;
overflow: hidden;
}
.desc-soins strong {
font-style: normal;
font-weight: 700;
}
/* END CARTE DES SOINS */