0

hi I am trying to have a thumbnail at the button of my picture, but it goes out of the whole span that I have here is my code here is the whole code http://jsfiddle.net/dP4eL/ I am using twitter bootstrap

<div class="tab-content">
    <div class="tab-pane fade in active" id="home"><div class="container">
        <div class="row">
            <ul class="thumbnails">
                <li class="span4">
                  <div class="thumbnail">
                    <img src="Hydrangeas.jpg" alt="product 1">
                    <div class="caption">
                        <h5>Product detail</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore       magna aliqua.</p>
                        <br>
                        <div class="span1">
                            <div class="thumbnail"><img src="Hydrangeas.jpg" alt="image">
                                <a href="#" class="btn btn-warning">fav</a>
                            </div>
                        </br>
                    </div>
                </p>
            </div>
        </div>
    </li>

Thank you

benji_r
  • 535
  • 2
  • 16
  • 34
  • Two questions: what should `` close and what's that lonely `` hanging between two `div`s? – raina77ow Oct 01 '12 at 23:25
  • and you have about 4 divs that are not closed. – Gerard Sexton Oct 01 '12 at 23:28
  • I thought this

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


    would take me to next line, so I can have a thumbnail of the picture under the description inside
      – benji_r Oct 01 '12 at 23:29
    • @behzad_b That is not what was asked. – Daedalus Oct 01 '12 at 23:29
    • The code continues with other spans under the divs that are not close yet – benji_r Oct 01 '12 at 23:30
    • here is the whole code http://jsfiddle.net/dP4eL/ – benji_r Oct 01 '12 at 23:32
    • @Daedalus that is what i want the thumbnail to show at the bottom as span1 – benji_r Oct 01 '12 at 23:33
    • A few heads ups: There is only one type of line-break tag, and that is a `
      `. No opening, no closing. Just singular. Also, div tags cannot go inside paragraph tags. Only in-line elements may; no block-level elements(div is block level).       – Daedalus Oct 02 '12 at 01:49
    • @Daedalus thanx for the heads up, I did that but still the thumbnail of the picture at the bottom goes outside of the first div – benji_r Oct 02 '12 at 05:31
    • @behzad_b Please update your code here with what you currently have. – Daedalus Oct 02 '12 at 05:45
    • @Daedalus http://jsfiddle.net/dP4eL/2/ here it is, if you look at the left panel in the results under the product you see how fav is out of place – benji_r Oct 02 '12 at 06:14

    4 Answers4

    0

    It's hard to tell from the limited code you have there, but if you would like a div to cut off extra content you can set a width and height for it and set it's overflow to hidden like so:

    .span1 {
    width: 100px;
    height: 100px;
    overflow:hidden;
}

    Just change the width and height to your specifications.

    earl3s
    • 2,393
    • 1
    • 23
    • 24
    • i change still it goes out of order... if you see it in the jsfiddle the first one is out of order – benji_r Oct 01 '12 at 23:37
    0

    Your problem is that the class span has the property float: left. Float removes the element from the float of the document.

    [class*="span"] {
    float: left;
}

    You have multiple instances of this css in your .. css declarations. The way I see it, you have two options.

    Either delete float: left from all instances, or apply a clearfix css class to your elements. This will ensure your div remains in the flow of your document, and your parent div expands to contain it.

    I would create a demo for you, but there is so much css in your js fiddle that js fiddle cannot parse it at a reasonable speed.

    Community
    • 1
    • 1
    Daedalus
    • 7,586
    • 5
    • 36
    • 61
    0

    remove your float:left setting for your span. If you aren't happy about that then try using table :D

    Jerry Lam
    • 452
    • 1
    • 7
    • 21
    0

    Your question is kinda hard to understand - i guess you do want that little "image / Favbutton"-Box to remain in its parent-div?!

    Bootstrap should use the floats in the right way so, try to add to your .thumbnail-class:

    .thumbnail { overflow: hidden; }

    If that´s what you want to achieve.

    Rockbot
    • 935
    • 1
    • 6
    • 24