My Fiddle is here: http://jsfiddle.net/7j5d9bcy/
My main problem is this code:
CSS:
.picWrapper {
width:250px;
border: 1px solid black;
}
.picThumb {
width:250;
height:250;
margin:auto;
padding-bottom:10PX;
text-align: center;
}
.picRating {
width:250;
height:90;
text-align: center;
padding-bottom:10px;
}
.picFilename {
width:230;
height:90;
margin: auto;
text-align: center;
padding-bottom:5px;
}
.picBottomButtons {
width:83px;
float:left;
text-align: center;
}
HTML:
<div class="picWrapper">
<div class="picThumb">
<img src="http://placehold.it/250x250" />
</div>
<div class="picRating">Rate this picture: 1 2 3 4 5 6 7</div>
<div class="picFilename">abcd.jpg</div>
<div class="picBottomButtons">1</div>
<div class="picBottomButtons">2</div>
<div class="picBottomButtons">3</div>
</div>
for some reason the last three DIVs (with the class picBottomButtons) is shown outside of the wrapper. I am a noob to CSS3, can someone explain why bottom line does not sit in the wrapper please?