Grow your CSS skills. Land your dream job.

Margin on a div with width 100% height 100% inside another div with width 100% height 100%

  • # April 12, 2013 at 6:13 am

    I a building a site with a video as a background. I want all divs to be centered and responsive and that’s why I am using width and height 100%. I then have an overlaying div that fades in and out on click using jquery. My problem is that I can’t seem to get an even margin around this div after it has faded in. The div I want margin on has the id “info”.

    My html looks like this:

    < !DOCTYPE html>








    and my css:

    * {
    margin: 0;
    padding: 0;
    }

    body {
    font-family: “HelveticaNeue-UltraLight”,”HelveticaNeue-Light”,”Helvetica Neue”,Helvetica,Arial,sans-serif;

    }

    header {
    z-index: 999;
    display: block;
    height: auto;
    width: 100%;
    position: fixed;
    }

    header a {
    text-decoration: none;
    font-size: 1.8em;
    color: #000000;
    }

    #nav {
    position: relative;
    float: right;
    top: 15px;
    right: 20px;
    color: #000000;
    }

    #container {
    height: 100%;
    width: 100%;
    display: block;
    }

    #video_background {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1000;
    }

    #info {
    height: 100%;
    width: 100%;
    background: rgba(255,255,255,0.97);
    z-index: 900;
    display: none;
    position: fixed;
    margin: 10px;
    vertical-align: center;
    }

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".