Css positioning question - moving username/date/avatar below tweet content

[4Progress]

Hi, I know you're probably busy and this isn't an issue with your resource here (thanks by the way) so I understand if you don't have time to answer.

I'm trying to style the widget. I've spent many hours and I'm still stuck.

What I'm trying to do is bring the username and tweet date down to the bottom, below the tweet content and above the retweet icons.

In doing this I've kinda come close, but because the twitter username is in the same div as the twitter icon, I can't position them properly (relative to the bottom of the tweet/between the tweet content/icons).

Here's what I've managed to get so far: http://i.imgur.com/SMnfUtf.png

That's what I'm going for, but I have problems when I end up scrolling.

[I'm trying to copy the design of the block above]

CSS:

@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700|Istok+Web|Oxygen:300,700,400|Varela+Round|Chivo|Telex);
html {
  color: white !important; }

@media (max-width: 767px) {
  html {
    width: 100%; } }
@media (min-width: 768px) {
  html {
    width: 560px; } }
.root.timeline.twitter-timeline {
  background-color: #f0f7fc;}
.root.timeline.twitter-timeline p {
position:relative;
color: #333333;
margin-left:45px;
margin-top:-38px;
padding-bottom:25px;
}
  .root.timeline.twitter-timeline p, .root.timeline.twitter-timeline a, .root.timeline.twitter-timeline ol, .root.timeline.twitter-timeline ul, .root.timeline.twitter-timeline li { 
    font-family: "Oxygen", "Ubuntu", "Helvetica Neue", Helvetica, arial, sans-serif;
     font-size:11px; }

.root.twitter-timeline .tweet {
  padding: 7px 5px 13px 1px;
color: #176093;
  border-bottom: 1px solid #d7edfc; }
.root.twitter-timeline a,
.root.twitter-timeline a:visited {
  text-decoration: underline; 
      color: #176093;}
.root.twitter-timeline .u-url,
.root.twitter-timeline .expand,
.root.twitter-timeline .hashtag,
.root.twitter-timeline .profile {
  text-decoration: none; }
  .root.twitter-timeline .u-url:hover,
  .root.twitter-timeline .expand:hover,
  .root.twitter-timeline .hashtag:hover,
  .root.twitter-timeline .profile:hover {
    text-decoration: underline;
    color: #176093;
    font-size:11px;
     }






.dt-updated {
position:absolute;
bottom:46px;
width:35px;
margin-left:-50px;
}

.u-url .profile {
position:relative;
bottom:77px;
width:35px;
margin-left:0px;
}

.p-nickname {
position:absolute;
bottom:-45px;
}


.retweet-credit{
padding-top:5px;
padding-bottom:20px;
}

.tweet-actions{
z-index:2;
margin-top:20px;
}



.full-name {
  display: none; }

Generally looks okay, but when I scroll I have positioning issues with the username.

Such as this: http://i.imgur.com/lKDYzMh.png and this: http://i.imgur.com/MSDPRQf.png

I've tried moving the main header block lower and positioning .avatar towards the top using negative margins, but I end up with the same issue in the above screenshots but only with the avatars.

I've tried several variations in the css, with different class positioning approaches but with no luck.

Any insight into this problem?

[kevinburke]

Oh man. I'm not sure I have anything great to say other than when trying to do things with CSS, working with the simplest possible model seems to help, eg remove all of the elements that are unnecessary and then experiment until you can get it to work.