CODEWITHSUNDEEP
htmlcsspositiontwitter-bootstrap
Keva161
Keva161

Reputation: 2693

Applying position relative and then position:absolute makes the div stretch across the container?

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?

Upvotes: 0

Views: 9797

Answers (2)

Andres I Perez
Andres I Perez

Reputation: 75389

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

Upvotes: 7

dannymcc
dannymcc

Reputation: 3814

If I'm understanding it correctly they what you actually want to do is set the container div secondWrapper to position: relative and then set the inner div, social_icons div to position:absolute.

I can't see any positioning in your example, but if you want to edit your question with the current version of the code which includes the positioning then I will take a look.

Is this the kind of thing you are looking for? http://jsfiddle.net/dannymcc/tXFTt/1/embedded/result/

If so, take a look at the code http://jsfiddle.net/dannymcc/tXFTt/1/

Rather than using each of the buttons classes I have used :nth-child(1) because you've used the same class for each of the buttons.

I also set a height for the third div which may need altering once you've completed the font changes etc.

There is likely a better way to do this if you're using Twitter bootstrap or similar. This is just a quick and dirty way of getting it done.

Upvotes: 1

Related Questions