0

I'm trying to format a box to look like a "status update" like feature. Currently, this is what it looks like. enter image description here

Ideally, I would like the top right hand corner of the box to display the date and the bottom right hand corner to display "Replies". As you can see from the picture, it doesn't really do this. Any help on how to do this is greatly appreciated.

My CSS code is here. http://jsfiddle.net/hKcmu/

Thanks so much!

2 Answers 2

2

add

position: relative;

to your containing div then use

boxytest sup
{
    position: absolute;
    right: 2px;
    top: 2px;
}

boxytest sub
{
    position: absolute;
    right: 2px;
    bottom: 2px;
}

to position the date/replies.

Heres your updated Fiddle

Edit

You can use padding on the boxytest to cope with the text being too long,

this puts enough space above and below the text for the date/replies

boxytest
  {
    position: relative;
    .....
    padding: 20px 0;
  }

and this makes room on the right

boxytest
  {
    position: relative;
    .....
    padding: 20px 0;
    padding: 4px 120px 4px 0;
  }

updated Fiddle

Sign up to request clarification or add additional context in comments.

1 Comment

Thanks. I updated the fiddle. jsfiddle.net/hKcmu/4 If the message is too long, it sort of overrides the replies/date. Is there a way to make it not do this?
1

Use a combination of position: relative and position: absolute:

boxytest {
    /* all the other CSS */
    position: relative;
}

boxytest sup {
    position: absolute;
    top: 0;
    right: 0;
    height: 48%;
}
boxytest sub {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 48%;
}​

JS Fiddle demo.

1 Comment

Thanks! However, if I make the second box contain the replies/date, due to the longer text, it 'overrides' the replies/date. jsfiddle.net/hKcmu/5 Any way to rectify this?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.