#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    1
    Rep Power
    0

    Positioning content in footer so it stays in same place?


    Hi all,
    I have a question regarding placing content in a footer and having it stay centered when the window is resized. Right now i have a main footer Div which spans 100% of the window, and a wrap div inside with a contact us image, a small div with some info about the company, then a small div with 3 socialmedia icons.
    My problem is when the window width shrinks it makes the social icons div move under the rest, then eventually the text moves under as well.

    My stylesheet is here

    PHP Code:

    @charset "utf-8";
    /* CSS Document */

    * {
        
    margin 0;
        
    padding 0;
    }

    imgobjectembedvideo {
        
    max-width:100%;
        
    displayinline-block;
        
    border0;
        -
    ms-interpolation-modebicubic;
        
    vertical-alignmiddle;
    }


     
    #wrap {
         
    width:100%;
         }
     
         * {
        
    margin 0;
        
    padding 0;
        }

        
    body {
        
    background-colorblack;
        
    text-align:center;
        
    color:white;
        
        -
    webkit-background-size100%;
        -
    moz-background-size100%;
        -
    o-background-size100%;
        
    background-size100%;
        
    background-repeatno-repeat;

        }
        
        
    #naviWrap {
        
    position:fixed;
        
    clear:both;
        
    top:0;
        
    z-index:200;
        
    width:800px;
        
    left:50%;
        
    margin-left:-400px;
        }

        
    #naviWrap img {
        
    max-width:100%;
        
    float:left;
        }


        
    #featureDiv {
            
    position:relative;
            
    width:25%;
            
    border:1px solid yellow;
            
    margin65auto ;
            
            
    margin-bottom125px;
        }
        
        
    #featureDiv .img {
            
    width:100%;
            
    max-width:100%;
        }
        
        
        
    #contentWrap {
        
    width:90%;
        
    margin0 auto 0 auto;
        
        
        }
        
        
        
        
    #contentWrap .bentoBox {
        
    width:77%;
        
    height:30%;
        
    margin0px auto 100px auto;
        
    padding:10px;
        
    background-color#c2c0c1;
    }

        
    #contentWrap .bentoBox .bentoInfo {
        
    width:90%;
        
    height:75px;
        
    margin10px auto;    
        }
        
        
    #contentWrap .bentoBox .bentoInfo .client {
        
    float:left;
        
    width:45%;
        
    text-align:left;
        }
        
    #contentWrap .bentoBox .bentoInfo .story {
        
    float:right;
        
    width:45%;
        
    text-align:left;
        }
        
    #contentWrap .bentoBox .img {
        
    margin0px auto;
        
    width:100%;
        
    max-width:100%;
        }
        
    #contentWrap .bentoBox img {
            
    max-width:100%;
            
        }
        .
    bentoBox p {
        
    font-size:12px;
        }
         
        
    #footer {
        
    background-image:url(../img/footerbg1.png);
        
    margin-bottom:125px;
    }

    #footer #footerWrap {
        
    width:90%;
        
    height:140px;
    }

    #footer #contactBtn {
        
    margin-left:100px;
        
    margin-top:30px;
    }

    #footer #footerText {
        
    width:450px;
        
    margin15px 15px 0 30px;
        
    height:100px;
        
    color:black;
        
    padding-top:30px;
        
    text-align:justify;
    }

    #footer #socialIcons {
        
    width:150px;
        
    height:37px;
        
    margin-top:45px;
        
    clear:right;
    }


        .
    fltlt {
            
    float:left;
        }
        
        .
    fltrt {
            
    float:right;
        } 
    actual page is here

    PHP Code:


    <!doctype html>
    <
    html>
    <
    head>
    <
    meta charset="utf-8">
    <
    title>Conch&amp;Media</title>
    <
    link href="style/style.css" rel="stylesheet" type="text/css">
    <
    link href="style/boilerplate.css" rel="stylesheet" type="text/css">
    <
    script src="js/jquery-1.8.3.js"></script>
    <script src="js/jquery.ez-bg-resize.js" type="text/javascript" charset="utf-8"></script>
    </head>

    <body>

    <div id="wrap">
        

                <div id="naviWrap">
                
                    <div id="nav"> 
                        <img src="img/badge-bulb1.png" alt="badge">
                        <img src="img/badge-reel1.png" alt="badge">
                        <img src="img/badge-mobile1.png" alt="badge">
                        <img src="img/badge-pen1.png" alt="badge">
                        <img src="img/badge-globe1.png" alt="badge">
                        <img src="img/badge-book1.png" alt="badge">
                    </div>
                    
                  </div>
                   
                
                 <div id="featureDiv">
                <img src="img/featured.png" alt="Featured Expeditions" class="img">
                   </div>
            
            
            <div id="contentWrap">
               
                
            
                <div class="bentoBox">
                
                    <div class="bentoInfo">
                    
                        <div class="client">
                        <h1>Client</h1><p> : Blah</p>
                        </div>
                        
                        <div class="story">
                        <h1>Story</h1><p> :  blah</p>
                        </div>
                        
                    </div>
                    
                    <div class="img">
                    <img src="img/bento1.jpg" alt="bento">
                    </div>
                </div>
                
                <div class="bentoBox">
                
                    <div class="bentoInfo">
                    
                        <div class="client">
                        <h1>Client</h1><p> : Blah</p>
                        </div>
                        
                        <div class="story">
                        <h1>Story</h1><p> :  blah</p>
                        </div>
                        
                    </div>
                    
                    <div class="img">
                    <img src="img/bento2.jpg" alt="bento">
                    </div>
                </div>
                
                <div class="bentoBox">
                
                    <div class="bentoInfo">
                    
                        <div class="client">
                        <h1>Client</h1><p> : Blah</p>
                        </div>
                        
                        <div class="story">
                        <h1>Story</h1><p> :  blah</p>
                        </div>
                        
                    </div>
                    
                    <div class="img">
                    <img src="img/bento3.jpg" alt="bento">
                    </div>
                </div>
                
               
               
               
            
            </div>
                
                <div id="footer">
                
                    <div id="footerWrap">
                       
                        <img src="img/contact.png" alt="contactUs" id="contactBtn" class="fltlt"> 
                        
                            <div id="footerText" class="fltlt"> <p>25 MAITLAND STREET (SUITE 1403) • TORONTO ONTARIO CANADA
                             • </p> </div>
                        
                        
                        <div id="socialIcons" class="fltlt">
                
                        <img src="img/facebook.png" alt="facebook">
                        <img src="img/twitter.png"  alt="twitter">
                        <img src="img/linkdin.png" alt="linkdin">
            
                       </div>
                        
                    
                    </div>
                
                </div>
     
        
    </div>

    </body>
    </html> 

    When you resize notice the footer at the bottom the content shifts, id like it to stay in the same spot just like on the bottom of this site for example.
    Ignore large gap on top haven’t completed full design yet.
    Any replies are much appreciated.

    I have a link to a live version unfortunetley since I am a new member i cannot post the link.
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    32
    You have text-align: justify in your #footer #footerText. Remove this and add text-align: center; to your #footer div.

    Also, you don't need to have #footer #footerText, just #footerText will suffice

IMN logo majestic logo threadwatch logo seochat tools logo