CODEWITHSUNDEEP
htmlcss
factordog
factordog

Reputation: 597

Pushing content below each other

Hey everyone got this one div that im wanting to push below the rest of my content and stay there. Just doesnt seem to want to move. Basically need to push .footerwrap3 to the bottom of all my content. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Home</title>
        <!--===================================================css links===================================================!-->
        <link href='http://fonts.googleapis.com/css?family=Raleway:600,500,400,200' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Roboto:400,700,900,100,300' rel='stylesheet' type='text/css'>
        <link href="css/default_style.css" rel="stylesheet" type="text/css" />
        <link href="css/portfolio_style.css" rel="stylesheet" type="text/css" />
        <script src="js/modernizr.custom.js"></script>
    </head>   
    <body>
        <!--===================================================Header===================================================!-->
        <div class="wrapper">
            <div class="headerwrap">
                <div class="social">    
                    <a href="www.facebook.com"><img class="move" src="images/deviant.png"></a>
                    <a href="www.facebook.com"><img class="move" src="images/yt.png"/></a>
                    <a href="www.facebook.com"><img class="move" src="images/fb.png"/></a>
                </div>
                <!--close social!-->
                <div class="header">
                    <div class="logo">
                        <img src="images/logo.png" />
                    </div>
                    <!--close logo-->
                </div>
                <!--close header!-->
                <div class="menu">
                    <ul class="menutxt">
                        <li><a href="index.html">HOME</a>
                        </li>
                        <li><a href="portfolio.html">PORTFOLIO</a>
                        </li>
                        <li><a href="contact.html">CONTACT</a>
                        </li>
                    </ul>
                </div>
                <!--close menu!-->
            </div>
            <!--close headerwrap!-->
            <!--===================================================Contact===================================================!-->            
            <div class="main">   
               <div id="cbp-fbscroller" class="cbp-fbscroller">
                    <nav>
                        <a href="#fbsection1" class="cbp-fbcurrent">Section 1</a>
                        <a href="#fbsection2">Section 2</a>
                        <a href="#fbsection3">Section 3</a>
                        <a href="#fbsection4">Section 4</a>
                        <a href="#fbsection5">Section 5</a>
                    </nav>
                    <section id="fbsection1"></section>
                    <section id="fbsection2"></section>
                    <section id="fbsection3"></section>
                    <section id="fbsection4"></section>
                    <section id="fbsection5"></section>
                </div>
              </div>
            <!--===================================================Footer===================================================!-->
            <div class="footerwrap3">
                <p class="foottxt">Designed and developed by Luke Babich- All Rights Reserved ©2015</p>
            </div>
            <!--close footerwrap!-->
        </div>
        <!--close wrapper!-->


        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <!-- jquery.easing by http://gsgd.co.uk/ : http://gsgd.co.uk/sandbox/jquery/easing/ -->
        <script src="js/jquery.easing.min.js"></script>
        <!-- waypoints jQuery plugin by http://imakewebthings.com/ : http://imakewebthings.com/jquery-waypoints/ -->
        <script src="js/waypoints.min.js"></script>
        <!-- jquery-smartresize by @louis_remi : https://github.com/louisremi/jquery-smartresize -->
        <script src="js/jquery.debouncedresize.js"></script>
        <script src="js/cbpFixedScrollLayout.min.js"></script>
        <script>
            $(function() {
                cbpFixedScrollLayout.init();
            });
        </script>

    </body>
</html>

Default Styling CSS:

@charset "utf-8";
/*---------------------------- Body and Default ----------------------------*/
body {
    margin:0 auto;
    background:#171717;
    font-family: 'Roboto', sans-serif;
    color:#CCC;
} 
html, body {
    height: 100%;
}
a{
    color:#000;
    transition:300ms;
}
a:hover {
    color:#000;
}
a:link {
    text-decoration: none;
}
/*---------------------------- Main Wrapper ----------------------------*/
.wrapper{
    display: table;
    width: 100%;
    height: 100%;
}
/*---------------------------- Header ----------------------------*/
.header{
    position:relative;
    min-height:180px;
    padding-right:225px;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    -moz-box-shadow: 0px 10px 20px 0px #333 ;
    -webkit-box-shadow: 0px 10px 20px 0px #333 ;
    box-shadow: 0px 10px 20px 0px #000;
    z-index:200;
}
.logo{
    position: absolute;
    min-width:60px; 
    top:4%;
}
.logo img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width:100%;
}
.social{
    position: absolute;
    width:100%;
    min-width:20px; 
    top:15px;
    right:1%;
    z-index:500;    
}
.social img{
    float:right;
    width:35px;
    display: block;
    padding:0 0 0px 15px;
}
img.move {
    bottom:0px;
    transition: transform 0.4s cubic-bezier(0.2, 1, 0.44, 1.2);
}
img.move:hover {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.4, 1.4, 1.4);    
}
/*---------------------------- Menu ----------------------------*/
.menu{
    position:absolute;
    width:100%;
    top:200px;
    z-index:401;
}
ul {
    margin: 0 auto;
    padding:0 0 5px 0;
    list-style-type: none;
}
li{
    display: inline;
    list-style:none;
    padding:1%;
    transition: all 300ms;
}
li a{
    color:#CCC;
    transition:300ms;
}
li a:hover {
    color:#900;
}
.menutxt{
    text-align: center;
    font-family: 'Raleway', sans-serif;
    font-size:1.8vw;
    font-weight:400;
    z-index:300;
}
/*---------------------------- Footer Text ----------------------------*/
.foottxt{
    width:100%;
    text-align: center;
    background:#070707;
    font-family: 'Roboto', sans-serif;
    padding:15px 0;
    font-size:0.7em;
    color:#FFFFFF;
    font-weight:200;
    margin: 0;
    box-sizing: border-box;
}
/*---------------------------- -------------------------------------------------------- FADERS ---------------------------- ----------------------------*/
/*---------------------------- Logo Fader ----------------------------*/
.logofade{
  animation: logofadein 3s;
  -moz-animation: logofadein 3s; /* Firefox */
  -webkit-animation: logofadein 3s; /* Safari and Chrome */
  -o-animation: logofadein 3s; /* Opera */
}
}
@keyframes logofadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes logofadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes logofadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes logofadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
/*---------------------------- menu Fader ----------------------------*/
.menufade{
    opacity:0;  
    animation: menufadein forwards 3s 1s;;
    -moz-animation:  menufadein forwards 3s 1s; /* Firefox */
    -webkit-animation:  menufadein forwards 3s 1s; /* Safari and Chrome */
    -o-animation:  menufadein forwards 3s 1s; /* Opera */
}
}
@keyframes  menufadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes  menufadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes  menufadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes  menufadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
/*---------------------------- social Fader ----------------------------*/
.socialfade{
    opacity:0;  
    animation: socialfadein forwards 3s 0.5s;;
    -moz-animation:  socialfadein forwards 3s 0.5s; /* Firefox */
    -webkit-animation:  socialfadein forwards 3s 0.5s; /* Safari and Chrome */
    -o-animation:  socialfadein forwards 3s 0.5s; /* Opera */
}
}
@keyframes  socialfadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes  socialfadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes  socialfadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes  socialfadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

Page Styling CSS:

/*---------------------------- Content ----------------------------*/
.main{
    position:relative;
    display:block;
    height:100%;
}
/*---------------------------- Footer ----------------------------*/
 .footerwrap3{
     position:relative;
    bottom:0px;
    width:100%;
    z-index:10000;
    -moz-box-shadow: 0px -10px 20px 0px #000;
    -webkit-box-shadow: 0px -10px 20px 0px #000;
    box-shadow: 0px -10px 10px 0px #000;
}
/*---------------------------- Faders ----------------------------*/
/* Set all parents to full height */
.container,
.cbp-fbscroller,
.cbp-fbscroller section { 
    height: 100%; 
}

/* The nav is fixed on the right side  and we center it by translating it 50% 
(we don't know it's height so we can't use the negative margin trick) */
.cbp-fbscroller > nav {
    position: fixed;
    z-index: 9999;
    right: 100px;
    top: 50%;
    width: 26px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.cbp-fbscroller > nav a {
    display: block;
    z-index: 9999;
    color: transparent;
    width: 26px;
    height: 26px;
    outline: none;
    margin: 25px 0;
    border-radius: 50%;
    border: 4px solid #fff;
}

.no-touch .cbp-fbscroller > nav a:hover {
    background: rgba(255,255,255,0.6);
}

.cbp-fbscroller > nav a.cbp-fbcurrent {
    background: #fff;
}

/* background-attachment does the trick */
.cbp-fbscroller section {
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}

.no-touch .cbp-fbscroller section {
    background-attachment: fixed;
}

#fbsection1 {
    background-image:url(../images/151368.jpg);
}

#fbsection2 {
    background-image:url(../images/dsas.png);
}

#fbsection3 {
    background-image:url(../images/151368.jpg);
}

#fbsection4 {
    background-image:url(../images/dsas.png);
}

#fbsection5 {
    background-image:url(../images/151368.jpg);
}

Just really struggling to get the concept of getting divs below one another in terms of positioning and height etc.

Thanks in advance!

added a fiddle to help visualize http://jsfiddle.net/v5nenaej/

Upvotes: 0

Views: 703

Answers (3)

Bmd
Bmd

Reputation: 1318

I haven't quite gotten the problem solved, but if you look at my update http://jsfiddle.net/v5nenaej/2/ you can see I've set the wrapper (CSS line 23) to display:block as GRC suggested (to account for the fact that tables will automatically collapse without content).

Your second issue was setting both .cbp-fbscroller (the container element) and .cbp-fbscroller section (the children) to height:100% (line 267).

From my understanding of CSS and the box model: If you were to use the CSS .cbp-fbscroller, .cbp-fbscroller section {height:300px;} instead of height:100%, then your parent container would be 300 px tall. This causes your adjacent siblings (like the .footerwrap3 div you're having trouble with) to begin stacking at the bottom of the .cbp-fbscroller div. All of the children in the .cbp-fbscroller div then become overflow content which, in this case is being displayed as blocks artificially extending your page and overlapping your footer.

To get the .cbp-fbscroller sections to display as blocks in the flow of content, I changed the .cbp-fbscroller height rule to min-height:100%.

From here I think you still have a few other conflicting rules that might come down to all of the positioning or other height properties in the style sheet. There's a little too much code there for me to sort through right now, but if you make those changes (line 267 and line 24 in my fiddle) that should get you a lot closer, and you can start fresh with a new fiddle and just try to build blocks that stack vertically at like 60% height. Once you get that figured out, you can add your other CSS back in and figure out what broke it.

Upvotes: 2

Maximillian Laumeister
Maximillian Laumeister

Reputation: 20359

Your .cbp-fbscroller div is very tall, and is making your document much taller than it would be otherwise. If I remove that div, your .footerwrap3 div shows up correctly below all your other content.

It looks like the .cbp-fbscroller navigation is for paging down multiple pages of content, but since your site layout doesn't yet have multiple pages of content, it's making your document taller than the rest of the page. Once you add in a bunch more content, it should correctly push down your .footerwrap3 div.

Upvotes: 1

lunaks
lunaks

Reputation: 136

You just need to change

    .footerwrap3{
        position:relative;
}

to

position:fixed;

Upvotes: 0

Related Questions