Question

Here’s my code..

<div id="secondWrapper">
    <div class="para1">  
      <div class="heading">
        <h1>Heading 1</h1>
      </div>
      <div class="paragraph">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at ipsum in nunc dignissim fringilla. Donec porta elit ut diam eleifend eget rhoncus risus dignissim. Vivamus malesuada accumsan molestie. Maecenas lobortis, ipsum sit amet mattis tincidunt, turpis odio tempus massa, at scelerisque elit diam id dolor. 
        </p>
      </div>
    </div>
    <div class="para2">  
      <div class="heading">
        <h1>Heading 2</h1>
      </div>
      <div class="paragraph">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at ipsum in nunc dignissim fringilla. Donec porta elit ut diam eleifend eget rhoncus risus dignissim. Vivamus malesuada accumsan molestie. Maecenas lobortis, ipsum sit amet mattis tincidunt, turpis odio tempus massa, at scelerisque elit diam id dolor. 
        </p>
      </div>
    </div>
    <div class="social_icons">
      <a class="btn" href="#">
          <i class="icon-twitter-sign icon-large"></i> Follow us on Twitter</a>

      <a class="btn" href="#">
          <i class="icon-facebook-sign icon-large"></i> Find us on Facebook</a>

      <a class="btn" href="#">
         <i class="icon-facetime-video icon-large"></i> Subscribe on Youtube</a>
    </div>
  </div><!-- /container -->

And CSS…

    #secondWrapper{
    height:144px;
    width:740px;
    margin:0 auto;
    position: relative
    }

.para1 {
    width:211px;
    padding-right: 39px;
    display: block;
    overflow: hidden;
    float: left
}

.para2 {
    width:211px;
    padding-right: 39px;
    display: block;
    float: left;
}

.social_icons {
    width: 211px
    display: block;
    position:absolute;
}

.heading {
    padding-bottom:31px;
}

.paragraph {
    width:211px;
}

Here’s my problem. With the above code the social icons that are contained in the social_icons div are floating to the top of the div and not really giving me the look that im looking for.

So, I want to position them to the bottom of the div so they are more inkeeping with the rest of the text on the page. One way of doing this (so says Google). Is to apply position: absolute to my container div (secondWrapper) and then apply position:relative and bottom: 0 to the social_icons div.

However, when I do this it just stretches the divs contents across my page and disregards the width constraint that ive already applied.

Does anyone know of another way to get the solution that im looking for?

Answer 1

You’re not really taking advantage of the bootstrap grid system. You can easily rewrite what you have to support it and not have to resort to position:absolute to do it.

First off, you’re creating your own container, the bootstrap already has some .span classes made for you that you can use to your liking, so you can rewrite your markup using them like this:

HTML

<div class="container">
  <div class="row">
    <div class="span4">
      ....
    </div>
    <div class="span4">
      ....
   </div>
    <div class="social_icons span4">
      ....
    </div>
  </div>
</div>

Then you can style the your social icons easily by just targeting the span container with your own class.

Demo