CODEWITHSUNDEEP
htmlcss
Spencer
Spencer

Reputation: 597

CSS/HTML Div Alignment

I'm trying to align a div at the bottom of another div (parent/child), but I can't seem to figure it out.

enter image description here

What I want to do is align the text that has the date as well as the edit/delete links to the bottom of the "bubble".

Here's the code I'm using:

<div class="bubble_wrap">
    <div class="bubble_image"><img src="http://sitefrost.com/images/avatars/Avatar-3-Admin.gif"></div>
    <div class="bubble_content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pellentesque auctor imperdiet. Morbi mollis nulla et odio scelerisque rutrum. Fusce sem justo, porta vel lacinia quis, convallis et elit. Sed id velit ut magna lobortis placerat at ut lectus. Aenean vel velit sem.
        <div class="date">June 9th, 2011 at 12:01 pm &ndash; <a href="#">Edit</a>&nbsp;&nbsp;<a href="#">Delete</a></div>
    </div>
</div>

.bubble_wrap {
    overflow: auto;   
    margin-bottom: 10px;
}
.bubble_wrap .bubble_image {
    float: left;
    margin-right: 0px;
    margin-bottom:3px;
}
.bubble_wrap .bubble_image img {
    max-width: 85px;
    max-height: 85px;
}
.bubble_wrap .bubble_content {
    width: 565px;
    min-height:60px;
    background: #fbfcfe;
    background: -moz-linear-gradient(top, #fbfcfe 0%, #f3f4f6 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfcfe), color-stop(100%,#f3f4f6));
    background: -webkit-linear-gradient(top, #fbfcfe 0%,#f3f4f6 100%);
    background: -o-linear-gradient(top, #fbfcfe 0%,#f3f4f6 100%);
    background: -ms-linear-gradient(top, #fbfcfe 0%,#f3f4f6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfcfe', endColorstr='#f3f4f6',GradientType=0 );
    background: linear-gradient(top, #fbfcfe 0%,#f3f4f6 100%);
    border:1px solid #CFD0D2;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    float: right;
    padding:10px;
    position:relative;
}
.bubble_wrap.bubble_right .bubble_image {
    float: right;
    margin-right: 0px;
    margin-left: 0px;  
}
.bubble_wrap.bubble_right .bubble_content {
     float: left;   
}
.bubble_wrap.bubble_right .right {
    text-align:right;
}
.bubble_wrap .date {
    color: #888;
    font-size:11px;
    display:block;
}
.bubble_wrap .date a:link, a:visited, a:hover {
    text-decoration:none;
    font-weight:bold;
    color:#888;
}

Upvotes: 0

Views: 492

Answers (3)

Ryan
Ryan

Reputation: 1888

When looking at your code the .bubble_wrap class has a margin-bottom assigned, try changing this to 0 and asigning it to the .date class to give your padding. I would also suggest if you want more space between the date and text to assign a margin-top to the .date class. 

.bubble_wrap {
    overflow: auto;   
    margin-bottom:0;
}
.date {
margin-top:10px;
margin-bottom:10;
}

I hope this helps.

Upvotes: 0

kinakuta
kinakuta

Reputation: 9037

Set the position of the containing div to relative and the inner div containing the date to absolute giving it a bottom position of 0. Then, make sure the containing div has enough bottom padding to always allow the inner div to show without covering the text that comes before it.

Upvotes: 1

locrizak
locrizak

Reputation: 12281

You could do this using position absolute

.bubble_content{position:relative}
.date{position:absolute; bottom:0; left:0;}

or you could also change your html structure a little bit so it looks like this:

<div class="bubble_wrap">
<div class="bubble_image"><img src="http://sitefrost.com/images/avatars/Avatar-3-Admin.gif"></div>
<div class="bubble_content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pellentesque auctor imperdiet. Morbi mollis nulla et odio scelerisque rutrum. Fusce sem justo, porta vel lacinia quis, convallis et elit. Sed id velit ut magna lobortis placerat at ut lectus. Aenean vel velit sem.
    <div class="date">June 9th, 2011 at 12:01 pm &ndash; <a href="#">Edit</a>&nbsp;&nbsp;<a href="#">Delete</a></div>
</div>

and set a padding on the bottom of .bubble_content

Either way is pretty clean. and simple to execute.

Upvotes: 2

Related Questions