My goal is to have the image float on the outer right edge (outside of the div) and be centered vertically. The above is not working. I’ve tried many other combinations but I can’t seem to find the right combination to get this to work.
can you post the css for that right floating div as well?
Anyway, to get your image, or what ever other element you have in mind, vertically aligned, the margin-top: 50% is not the way to go.
If you want a element vertically aligned center you have to positioned it absolute at top 50% and give it a negative top margin, half of it’s own height. I.e.
.panelExpand{
position: absolute; right: 0; top: 50%; margin-top: -150px;(in case the element has a height of 300px)
}
Again, I don’t know the properties of that right floating/positioned div you mentioned so I just gave it position right: 0;
If you want a element vertically aligned center you have to positioned it absolute at top 50% and give it a negative top margin, half of it’s own height. I.e.
The difficulty with this approach is the height of the container is dynamic because the number of list items is loaded from a changing data source. On top of this problem there are actually two of these container/img pairs stacked vertically. So the html is: