css to align title and everything below it - css

Question

I wish to align the title and summary(click the plus sign in site below)
as shown in the screenshot
my site
http://pligg.marsgibson.info/
screenshot
http://i47.tinypic.com/ntn55.jpg
suggest css for this

Answer 1

Without changing your current markup, a simple fix can be:
CSS
.title h2 {
color: #187AAB;
font-size: 14px;
font-weight: bold;
margin: 4px 0 0;
padding: 0 20px 0 32px;
position: relative;
}
.title h2 span {
left: 0;
position: absolute;
}
Print-screen:
What I did was to give some left and right padding to the h2 element, to limit the space available for the text inside it.
Then, to place the avatar on the proper place, I've used the CSS position.
EDITED
To address the issue of your trigger element, add to its CSS:
p.trigger {
position: relative;
z-index: 1;
}
EDITED
To address the height issue mentioned on the comment!
See this working Fiddle Example!
jQUery
// run only if elements are found
if ($('.title').size()>=1) {
// initialize variables
var $target = $('.title'),
size = 0,
count = $('.title').size();
// for each element found
$target.each(function() {
// check the tallest element
if (size===0) {
size = $target.outerHeight(true);
} else {
sizeTMP = $target.outerHeight(true);
size = (sizeTMP> size) ? sizeTMP : size;
}
// decrease the counter
count--;
// counter is 0, set the height
if (count===0) {
$target.css({ "height" : size + "px" });
}
});
}
Ps: The CSS display declaration for the class .subtext1 must be updated to: display:inline-block.