Positioning and Overflow with CSS

Question

Here is my jsfiddle:

http://jsfiddle.net/Xz3SH/

This is what i wanted to do:

1. On the right element, I'd like the "Close" text to be vertically centered.
2. On the main element, I'd like the lorem text to not overflow into the right.

Note the outer element has fixed position on purpose. Here's what I've tried:

• Making the p elements inline-blocks or otherwise, didn't make a difference.
• Making the right element a table-cell but it still didn't vertically center.
• Putting a hidden overflow on any/all of the elements with no luck.

Here's some CSS to satisfy the submission parser:

#panel-notice > p#close {
  display: inline-block;
  vertical-align: middle;
}

#panel-notice > p#message {
  display: inline-block;
  overflow: hidden;
}

EDIT: I should note, in case it wasn't clear, that the lorem text could be any height including one line.

Answer 1

You are using position: absolute; width the #close div so use top:50% to make it center. and in second point you should have to specify the with to the #message div to overcome overflow issue

Here's the demo demo

Answer 2

#panel-notice {display:table}

#panel-notice > p#close {display:table-cell; float:right;}

remove position:absolute and just put #panel-notice > p#close after p#message in html:)