SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    May 2008
    Location
    Missouri, USA
    Posts
    273
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positioning Problem - Float/precent Margin

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

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

    Code HTML4Strict:
    <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.
    Follow Me On Twitter: BryceRay

  2. #2
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,099
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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&#37; 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.

    Code CSS:
    .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;

  3. #3
    SitePoint Addict
    Join Date
    May 2008
    Location
    Missouri, USA
    Posts
    273
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code HTML4Strict:
    <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.
    Follow Me On Twitter: BryceRay

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,601
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Check out this vertical centering article
    http://www.search-this.com/2008/05/1...ring-with-css/
    Always looking for web design/development work. Willing to do it cheap to build portfolio!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •