Results 1 to 4 of 4

Thread: Vertically align container with fixed position and dynamic height

  1. #1
    Join Date
    Oct 2011
    Posts
    35
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Vertically align container with fixed position and dynamic height

    How do I align a container (eg social media plugins) with fixed position and dynamic height so that the container itself is vertically in the middle of the viewport? The container itself is visible as I have a background image and some border effects. The content inside the container should be vertically aligned as well.

    This is what I have but it doesn't work, the container doesn't even show up for some reason:

    Code:
    #socialpluginscontainer {
    position:fixed;
    width:100px;
    height:70%;
    padding-left:5px;
    right:10px;
    background: transparent url(../pictures/pagecontentoverlay.png);
    -moz-box-shadow:0px 0px 4px #000 inset;
    -webkit-box-shadow:0px 0px 4px #000 inset;
    box-shadow:0px 0px 4px #000 inset;
    }
    #socialplugins {
    text-align:center;
    }
    HTML:

    Code:
    <div id="socialpluginscontainer">
    
          <div id="socialplugins">
    
               //code for social plugins
    
          </div>
    
    </div>

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,025
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    It's funny but I was just doing something like this earlier - 'converting' the divs to tables/table-cells should hopefully do it;
    Code:
    #socialpluginscontainer {
    position:fixed;
    width:100px;
    height:70%;
    padding-left:5px;
    right:10px;
    background: transparent url(../pictures/pagecontentoverlay.png);
    -moz-box-shadow:0px 0px 4px #000 inset;
    -webkit-box-shadow:0px 0px 4px #000 inset;
    box-shadow:0px 0px 4px #000 inset;
    display:table;
    }
    
    #socialplugins {
    text-align:center;
    display:table-cell; 
    vertical-align:middle; 
    }
    Reference and other possible solutions: http://css-tricks.com/vertically-cen...ti-lined-text/

    Something to bear in mind - social media plugins have scripts that generate their own styles/markup so that may conflict with what you're trying to do. If you try a few things and find that nothing works, even though it looks like it should, you probably need to do a bit of research on Google to try to find out the names/classes/id of any generated elements, then you can try to target those elements and use !important to override any auto-generated style rules.
    Last edited by Beverleyh; 03-15-2013 at 08:27 PM.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Oct 2011
    Posts
    35
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    The container itself also needs to be in the middle of the viewport.

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,025
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    http://css-tricks.com/snippets/css/c...ynamic-height/

    If you need more help, please post a link to your page.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

Similar Threads

  1. Animate and resize container to dynamic height
    By windbrand in forum JavaScript
    Replies: 0
    Last Post: 03-14-2013, 05:14 AM
  2. Fixed position relative to parent container
    By windbrand in forum JavaScript
    Replies: 11
    Last Post: 03-05-2013, 07:12 PM
  3. Fixed Height Dynamic Text Buttons
    By seths in forum CSS
    Replies: 1
    Last Post: 02-14-2010, 10:58 AM
  4. Replies: 1
    Last Post: 10-21-2009, 03:55 AM
  5. Vertically align images in a div
    By jc_gmk in forum HTML
    Replies: 1
    Last Post: 07-18-2007, 07:55 PM

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
  •