CODEWITHSUNDEEP
css
clankill3r
clankill3r

Reputation: 9543

Why do those divs overlap?

What I want is simple:

[copyright vimeo | facebook | twitter share]

But my divs overlap. Or they go outside the footer. Or they hurt my brain in another way. Also I feel like I have way to much css for the simple things I want. How can this be done in a clean matter?

<div class="footer">

    <div class="copyright">
        <p>© 2016 css hurts my brain</p>
    </div>

    <div class="social-media">
        <div>Vimeo</div>
        <div>Facebook</div>
        <div>Twitter</div>
    </div>

    <div class="share-menu-button">
        SHARE
    </div>

</div>


.footer {
    position: fixed;
    width: 100%;
    height: 100px;
    bottom: 0;
    z-index: 20;
}

.footer .copyright {
    position: absolute;
    bottom: 0;
    float: left;
}

.footer .social-media {
    position: absolute;
    bottom: 0;
    float: left;
}

.footer .share-menu-button {
    position: absolute;
    bottom: 0;
    float: left;
}

.social-media div {
    float:left;
}

Upvotes: 1

Views: 54

Answers (2)

Tomer
Tomer

Reputation: 17930

Your css has several problems:

  1. when using position:absolute, float has no effect.
  2. when using position:absolute, all absolute positioned elements are stacked (unless you give them different positions)

Just use floats with no positions:

 .footer {
    position: fixed;
    width: 100%;
    height: 100px;
    bottom: 0;
    z-index: 20;
    background: #000;
    color: white;
}

.footer >div , .social-media > div{
  padding: 16px 20px;
}

.footer .copyright {
    float: left;
}

.footer .social-media {
    float: left;
}

.footer .share-menu-button {
    float: left;
    margin-top: 16px;
}

.social-media div {
    float:left;
}

fiddle: https://jsfiddle.net/kg6v5vjk/1/

Upvotes: 2

MichaelMariani
MichaelMariani

Reputation: 41

why not just use , theres no need to create a div for a standard formatting procedure given in html. That may solve a problem.

Also no need to use div around each VIMEO, FACEBOOK, TWITTER, instead just use

<p> Vimeo, Facebook, Twitter </p>

if you want to make them links then its similar

<p>
<a href="vimeo.com">Vimeo</a>
<a href="facebook.com">Facebook</a>`enter code here`
<a href="twitter.com">Vimeo</a>
</p>

Theres no need to use so many Divs

Upvotes: 0

Related Questions