CODEWITHSUNDEEP
htmlcss
user1191027
user1191027

Reputation:

Fixed Header on Top instead of Above

I'm trying to get a fixed header at the top of the page but for some reason it keeps going on top of the container instead. When I use margin-bottom or margin-top then it still sticks to the container.

index.css

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline; 
}
.full-container {
    width:100%;
}
.boxborder {
    -webkit-box-shadow:inset 0px 0px 0px 10px black;
    -moz-box-shado:inset 0px 0px 0px 1px black;
    box-shadow:inset 0px 0px 0px 1px black;
}
.header {
    height: 150px;
    margin-bottom: 20px;
    position: fixed;
}
.container {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 800px;
    height: 1200px;
}

index.html

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="index.css">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div class="full-container header boxborder"></div>
        <div class="container boxborder"></div>
    </body>
</html>

Upvotes: 0

Views: 269

Answers (1)

reinder
reinder

Reputation: 2551

You need to define top and left in your css for .header

Upvotes: 5

Related Questions