-1

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?

Ryan
  • 8,933
  • 19
  • 57
  • 97
  • 2
    Because you've floated the elements. Floating means absolute positioning, meaning the elements are removed from the normal DOM flow. Either use one of the inline display properties or Google _"clearfix"_. – Etheryte Oct 31 '14 at 02:05
  • Like I said, I am a noob... could you explain that a bit more clearly please? – Ryan Oct 31 '14 at 02:06
  • 1
    http://jsfiddle.net/7j5d9bcy/1/ -- float needs a clear. Look up clearfix too. Learn about floats. And use a value, not 250 but 250px – Christina Oct 31 '14 at 02:07
  • Look up basic css, terms, use, etc – Christina Oct 31 '14 at 02:08
  • possible duplicate of [How do you keep parents of floated elements from collapsing?](http://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing) – Etheryte Oct 31 '14 at 02:09
  • 1
    http://jsfiddle.net/ianhazzard/7j5d9bcy/6/ – Drazzah Oct 31 '14 at 02:09

3 Answers3

1

It's because you're using a float for those bottom buttons, but nothing else is floating. Basically you have things playing by different rules. Remove the float and add display: inline-block and you should be good. You will probably need to adjust the width as well.

Updated Fiddle http://jsfiddle.net/7j5d9bcy/4/

Scott Sword
  • 4,283
  • 5
  • 29
  • 37
  • This is more of a comment than an answer. – Etheryte Oct 31 '14 at 02:08
  • 1
    Nit - Ha. Or a specific solution. – Scott Sword Oct 31 '14 at 02:09
  • I down-voted you because this is a low quality answer that others with a similar problem are unlikely to gain much from. See the thread I marked the original question as a duplicate of for an example of a good answer. Don't take it personally. – Etheryte Oct 31 '14 at 02:12
1

I would use display: inline-block rather than floating the images. As stated above, floating removes the elements from the DOM. It doesn't absolutely position them as stated, but it does take them out of the flow.

I've updated your JS Fiddle to be the following:

CSS:

.picBottomButtons{
    width:50px;
    display: inline-block;
    text-align: center;
}

I changed the width of the images so when inline they all fit horizontally. I also changed the float:left to display: inline-block.

Example here:

http://jsfiddle.net/7j5d9bcy/5/

jjsquared
  • 279
  • 3
  • 9
1

It is because of floating .picBottomButtons elements, just use clearfix:

.picWrapper:before, 
.picWrapper:after {
    content: " ";
    display: table;
}
.picWrapper:after {
    clear: both;
}

FIDDLE

You can also add overflow: auto; to .picWrapper, more info how to clear floats with overflow.

Understanding CSS Floats

Danijel
  • 11,490
  • 4
  • 32
  • 51