CODEWITHSUNDEEP
htmlcsscss-positionfixed
Politiepet
Politiepet

Reputation: 93

CSS keep right margin with fixed header

so I have the following problem:

<!DOCTYPE html>
<html>
<head>
    <title>grouping Divs</title>
    <link type="text/css" rel="stylesheet" href="stylesheet.css" />
</head>
<body>
    <div id="header"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div id="footer"></div>
</body>
</html>

So basicaly 4 divs each making up elements on the web page. The CSS:

#header {
    height: 40px;
    width: 100%;
    background-color: brown;
    border-radius: 5px;

    position: fixed;
}

.left {
    height: 2000px;
    width: 70px;
    background-color: magenta;
    border-radius: 5px;

    float: left;
}

.right {
    height: 2000px;
    width: 70px;
    background-color: magenta;
    border-radius: 5px;

    float: right;
}

#footer {
    height: 60px;
    width: 100%;
    background-color: brown;
    border-radius: 5px;

    clear: both;
}

Now what I like to do is to display the header the same way as the footer, only then while keeping the postition fixed. All things I tried seem to come up with problems, removing the position: fixed from the header fixes the problem, but I want to keep it fixed. Setting the width to something like 99% only works if the screen resolution is right.

I really don't know what to do next, so any help would surely be appreciated!

Upvotes: 0

Views: 1951

Answers (2)

Florin Pop
Florin Pop

Reputation: 5135

Add:

body {
    margin: 5px;
    padding: 0;
}

This will remove the margin and padding of the body and it will make it look exactly as you wish.

And add the calc() function for the width available in css:

#header {
    width: calc(100% - 10px);
}

Demo jsfiddle.

Upvotes: 2

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

You can do this (your <body> by default brings some padding)

CSS

body{
    margin:0;
    padding:0;
}

DEMO HERE

Upvotes: 0

Related Questions