Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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

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

Problem

Here's my code..

Heading 1

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.

Heading 2

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.

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?

Problem courtesy of: Keva161

Solution

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

....
....

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

Demo

Solution courtesy of: Andres Ilich

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

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

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×