DIV: CSS cannot rescale images - css

Question

I am trying to rescale images of the following div but the CSS style doesn't have any effect.
The div tags:
<article id="article_1">
<div id="div_article_1_fleche_haut">
<img src="images/haut.png" />
</div>
<div id="div_article_1_central">
<div id="div_article_1_central_fg">
<img src="images/gauche.png" />
</div>
<div id="div_article_1_central_carte">
<img src="images/r500_0.gif">
</div>
<div id="div_article_1_central_fd">
<img src="images/droite.png" />
</div>
</div>
<div id="article_1_fleche_bas">
<img src="images/bas.png" />
</div>
</article>
The CSS file:
#div_header_main {
width: 90%;
overflow:hidden; /**/
border: thin solid black;
padding: 5px 10px 0px 5px;
}
#div_header_left {
width: 800px;
float:left;
}
#div_header_right {
width: 300px;
float:right;
}
#div_header_right img
{
float:right;
clear:right;
padding: 10px 0 0 0px;
border: thin solid black;
height:80px;
}​
#div_article_1_central_carte img
{
height: 25px;
}​
This is the jsfiddle file:
http://jsfiddle.net/e7gvbz66/3/

Answer 1

I have updated your CSS file on jsfiddle.net/e7gvbz66/8/ its working fine now. Unnecessary characters were present in your CSS file, I have removed and just added some styles to show the changes.
#div_header_main {
width: 90%;
overflow:hidden;
border: thin solid black;
padding: 5px 10px 0px 5px;
}
#div_header_left {
width: 800px;
float:left;
}
#div_header_right {
width: 300px;
float:right;
}
#div_header_right img
{
float:right;
clear:right;
padding: 10px 0 0 0px;
border: thin solid black;
height: 80px;
/*added for testing*/
width: 40px;
}
#div_article_1_central_carte img
{
/*updated for testing*/
height: 55px;
width: 100px;
}
#div_article_1_central_carte
{
}

Answer 2

Please include a style like this in your CSS file then the style of img will apply correctly.
#div_article_1_central_carte {
}