CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Jason Renaldo
Jason Renaldo

Reputation: 2822

Make mulitple divs line up next to each other inside parent div

I've searched the many similar questions like this, but none of the solutions are working. It should also be noted that I am using twitter bootstrap. I want a bunch of divs to span the entire length of the parent div at the bottom of it. I have tried putting them inside a div that text-align:center and then using float-left inside the gridPics class, and using display: inline-block, text-align :left and nothing seems to do it. The two in the example below are in the exact same spot, and I want them side by side. Here is what I have:

HTML: 

 <div class="row-fluid">
    <div class="span8 offset2 articleContent">
        <!-- These are the divs to span across, when it works there would be more than two -->
        <div class="gridPics"></div>
        <div class="gridPics"></div>
        <!-- They will also go over this image -->
        <img id="sidePic" src="img/about/aboutHeader_Mid1.png" alt="about">
    </div>
    <div class="span2"></div>
</div>

CSS:

 .gridPics{
   position: absolute;
   z-index: 1;
   width: 10%;
   height: 20%;
   background: #0000b3;
   bottom: 0;
   float: left;
 }


 .articleContent{
   position: relative;
   box-shadow: 0 0 5px 5px #888;
  }

 #sidePic{
   position: relative;
   z-index: -1;
 }

Here is where I am doing this, the blue divs would be pics (akin to thumbnails) that can be clicked. I want them to go all the way across:

/ScreenShot2013-01-09at85450PM_zps550e8e4a.png[/IMG]Where I am trying to achieve this

Upvotes: 0

Views: 4779

Answers (2)

Tim Franklin
Tim Franklin

Reputation: 3060

Here's a fiddle: http://jsfiddle.net/pureux/Er9eG/

You need a container for your gridPics and have it be absolute positioned (instead of the gridPics) at the bottom. Then float the gridPics inside of the container.

.picContainer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  min-height: 50px;
}

.gridPics {
   width: 50px;
   height: 50px;
   float: left;
   display: block;
   margin-right: 4px;
   margin-top: 4px;
 }

Upvotes: 1

Vainglory07
Vainglory07

Reputation: 5273

Is this what you're trying to do:DEMO

HTML

<div class="row-fluid">
  <div class="span8 offset2 articleContent">
      <div class="gridPics"></div>
      <div class="gridPics"></div>
      <div class="clear"></div>
      <img id="sidePic" src="img/about/aboutHeader_Mid1.png" alt="about">
  </div>
  <div class="span2"></div>
</div>

CSS

.gridPics{
    width: 10%;
    height: 20px;
    background: #0000b3;
    float: left;
    border:solid #FFF 1px;
 }
 .articleContent{
    box-shadow: 0 0 5px 5px #888;
 }

 #sidePic{
    z-index: -1;
 }

Upvotes: 0

Related Questions