CODEWITHSUNDEEP
htmlcss
Jakob Nielsen
Jakob Nielsen

Reputation: 5198

Vertically align of paragraph to the bottom of a div wont work

I have the following problem:

I have a div and in this div i have a paragraph ( p tag ) which contains like 5 images. I want that whole paragraph to be positioned at the bottom of the div container, but i dont manage to get it done, I have tried it with make the paragraph display inline box, or table cell, and vertically align it to bottom, but nothing works.

Maybe sombody can help me?

Code:

Div Container:

#info {
    float:left;
    text-align:center;
    width:770px;
    height:600px;
    background:#fcfcfc;
    border:thin solid;
    border-color:#CCC;
    -moz-border-radius: 5px;    
    -webkit-border-radius: 5px; 
    -o-border-radius: 5px;
    font-family: "Myriad Pro";
    font-size: 12px;
}

Paragraph which should be at bottom of div

 <p style="display:inline-block; vertical-align:bottom;">
        <!-- Twitch Chat - Insert Twitch Id -->
        <a href="http://de.twitch.tv/chat/embed?channel=guardsmanbob&amp;popout_chat=true"><img id="ov" src="../Images/List/diverse/button_twitchchat.png"  /></a> 
        <!-- IRC Chat - Insert Quakenet id -->
        <a href="http://webchat.quakenet.org/?channels=guardsmanbob"><img id="ov" src="../Images/List/diverse/button_ircchat.png"  /></a>
        <!-- Facebook - Insert Facebook URL --> 
        <a href="https://www.facebook.com/pages/Guardsman-Bob/316802258368275"><img id="ov" src="../Images/List/diverse/button_facebook.png" /></a>
        <!-- Twitter - Insert Twitter URL --> 
        <a href="https://twitter.com/GuardsmanBob"><img id="ov" src="../Images/List/diverse/button_twitter.png"  /></a> 
        <!-- Leaguepedia - Insert Leaguepedia URL -->
        <a href="http://leaguepedia.com/wiki/GuardsmanBob"><img id="ov" src="../Images/List/diverse/button_leaguepedia.png"  /></a>
        </p>

Upvotes: 2

Views: 9275

Answers (2)

ktamlyn
ktamlyn

Reputation: 4719

Maybe this will work for you:

<div id="info" style="position:relative;">
    <div style="position:absolute; bottom: 50px;">
        <p>[your images]</p>
    </div>
</div>

"50px" above needs to equal the height of the images in the <p> tag.

Or if the image height is variable, you could use the technique found here: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html. You would have to modify the margins in a manner to result in the positioning you require, but the technique linked to would give you want you need.

Upvotes: 0

Pete
Pete

Reputation: 58462

As you know the height of your p tag and it will always be the same you can use something like this:

for the parent container of the paragraph add the following styles:

.parent {position:relative; padding-bottom:20px; /*height of your images plus any padding for your paragraph*/}

then you can position your images absolutely:

 p {position:absolute; bottom:0; left:0;}

Upvotes: 5

Related Questions