Positioning Problem - Float/precent Margin

HTML & CSS
1

Below is the css/html i’m trying to get to work.


.panelExpand{
	float:right; 
	margin-right: -8px; 
	margin-top: 50%;


		
<div id="container">
   <img src="img/expand.gif" class="panelExpand"  />
    <br />
    <ul style="margin-left: -8px;">
       <li>...</li>
    </ul>
</div>

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.

Thanks for your help.

2

Check out this vertical centering article :slight_smile:

3

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;

4

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:

<div id="container">
   <img src="img/expand.gif" class="panelExpand"  />
    <br />
    <ul style="margin-left: -8px;">
       <li>...</li>
    </ul>
</div><div id="container2">
   <img src="img/expand.gif" class="panelExpand"  />
    <br />
    <ul style="margin-left: -8px;">
       <li>...</li>
    </ul>
</div>

I could define the height using a javascript but I would rather first see if it is possible to do it in css.