HTML CSS Styling box

Question

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!

Dampsquid · Accepted Answer · 2012-03-30 23:47:49Z

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

edited Mar 30, 2012 at 23:47

answered Mar 30, 2012 at 23:06

Dampsquid

2,47416 silver badges14 bronze badges

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

1 Comment

user432584920684 Over a year ago

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?

David Thomas · Accepted Answer · 2012-03-30 23:06:18Z

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.

answered Mar 30, 2012 at 23:06

David Thomas

254k53 gold badges382 silver badges421 bronze badges

1 Comment

user432584920684 Over a year ago

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?

Collectives™ on Stack Overflow

HTML CSS Styling box

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related