bootstrap 3 - Formatting divs and css problems

Question

I have two problems:

• Divs aren't aligned properly
• How to force thumbnail images to be lined horizontally, and with a horizontal scrollbar (for scrolling) if the thumbnail images exceed the width of the div they're in?

I don't want to use any external js librarys. I am trying to get it to work in pure css and bootstrap 3.

Here is what I have currently so far:

<div class="row">
      <div class="col-md-10">

            <div class="item">
                   <div class="row">
                    <div class="col-md-5">
                        <div class="row">
                                <div class="col-md-5">
                                        <div class="main-img">
                                                <img height="500px" width="500px" src="http://cdn.theatlantic.com/static/mt/assets/science/firefox-logo.jpg"/>  
                                        </div>
                                </div>

                                <div class="col-md-5">
                                        <div class="row">
                                                <div class="img-list">
                                                        <div class="col-md-3">
                                                                <img width="100px" height"100px" src="http://cdn.theatlantic.com/static/mt/assets/science/firefox-logo.jpg"/>
                                                        </div>

                                                        <div class="col-md-3">
                                                                <img width="100px" height="100px" src="http://cdn.theatlantic.com/static/mt/assets/science/firefox-logo.jpg"/>
                                                        </div>

                                                        <div class="col-md-3">
                                                                <img width="100px" height="100px" src="http://cdn.theatlantic.com/static/mt/assets/science/firefox-logo.jpg"/>
                                                        </div>

                                                        <div class="col-md-3">
                                                                <img width="100px" height="100px" src="http://cdn.theatlantic.com/static/mt/assets/science/firefox-logo.jpg"/>
                                                        </div>
                                                </div>
                                        </div>
                                </div>
                        </div>  
                    </div>

                    <div class="col-md-7">
                                <span> Title! </span>
                                <span> Some other text!</span>
                    </div>
                </div>  
            </div>

    </div>

    <div class="col-md-2">
     <!-- Some other html here -->
    </div>

</div>

I drew an image of what the layout should be:

The brown area is col-md-10 which contains the following things:

• pink area is the main img (col-md-5)
• dark grey area beneath the pink is the horizontal list of thumbnail images (thumbnails are col-md-3, not sure if that's best?)
• light grey area is just the text descriptions (col-md-7)

I didn't draw the col-md-2 though (which is on the right of the col-md-10 brown area).

Instead, I see a bunch of divs flying all over the place. The thumbnail list is floating at the top right, but the main img and the col-md-7 is correctly side-by-side. The thumbnail list isn't even aligned properly. Can someone help?

Answer 1

Here ya go...

http://jsfiddle.net/MUVG5/

<div class="row">
    <div class="col-md-10">

        <div class="item">
            <div class="row">

                <div class="col-md-5">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="main-img">
                                <img height="500px" width="500px" class="img-responsive" src="http://cdn.theatlantic.com/static/mt/assets/science/firefox-logo.jpg"/>  
                            </div>
                        </div>
                    </div>  
                    <div class="row">
                        <div class="col-md-12">
                            <div class="img-list">
                                <div class="col-md-3">
                                    <img width="100px" height"100px" class="img-responsive" src="http://cdn.theatlantic.com/static/mt/assets/science/firefox-logo.jpg"/>
                                </div>

                                <div class="col-md-3">
                                    <img width="100px" height="100px" class="img-responsive" src="http://cdn.theatlantic.com/static/mt/assets/science/firefox-logo.jpg"/>
                                </div>

                                <div class="col-md-3">
                                    <img width="100px" height="100px" class="img-responsive" src="http://cdn.theatlantic.com/static/mt/assets/science/firefox-logo.jpg"/>
                                </div>

                                <div class="col-md-3">
                                    <img width="100px" height="100px" class="img-responsive" src="http://cdn.theatlantic.com/static/mt/assets/science/firefox-logo.jpg"/>
                                </div>
                            </div>
                        </div>
                    </div>  
                </div>

                <div class="col-md-7">
                    <span> Title! </span>
                    <span> Some other text!</span>
                </div>

            </div>  
        </div>

    </div>

    <div class="col-md-2">
        <!-- Some other html here -->
    </div>

</div>

If you don't want your thumbs to collapse: http://jsfiddle.net/MUVG5/1/