How to correctly align fixed header fully to top and left in CSS


Tags: html,css,header,alignment

Problem :

So I have come across a problem when I tried aligning my header design fully to the top margin and the left margin. The use HTML and CSS to perform this. CSS code:

div#headerbox
{
background-color: #a56868;
width:100%;
height: 40px;
position: fixed;
display: block;
margin-top: 0px;
margin-left: 0px;
}

div#headerwrap
{
background-color: #a56868;
width:100%;
height: 40px;
position: fixed;
display: block;
}

HTML code:

<div id="headerbox">
    <div id="headerwrap">
        <p>TEST 123</p>
    </div>
</div>

Why doesnt this code align properly to the edges on both sides as I have put the lenght of the element to be 100%? and how can I fix this?

Current look



Solution :

Set the padding and margin of HTML body in CSS to zero.

body {
   margin: 0;
   padding: 0;
}

    CSS Howto..

    How to stop columns wrapping in three column liquid page?

    How to position an image inside a DIV with dynamic height with pure CSS/HTML?

    How can I select the first IFRAME within the second FB tag in a div?

    How to Limit the Div Exactly into the Screen Size

    How to rotate image used as list type in unordered list

    How can I get IE7 to see an HTC file in the same directory as my CSS?

    Android stock browser: How to prevent double tap closing browser

    How to define `autocomplete=“off”` as a CSS style?

    how to make a image in div to be dragged just downwards using html5 css jquery animation?

    how to hover after calling jquery animate()

    how to add embedded ruby in style tag

    How to disable external css stylesheet - Newbie

    How to explain CSS Float in general language?

    How do I trigger the popup dialog box automatically from iWebkit?

    How can I use CSS or Javascript to switch images on mouseover as simple and lightweight as possible?

    how to achieve facebook mobile site buttons menu scroll effect?

    How to add or create an illusion of movement to a fixed div?

    How to remove pseudo-element styles from the first element?

    How to persist checking the screen width in Javascript

    How do I apply CSS rules from a local domain to content in an iFrame from another domain

    Show bigger image on thumbnail's hover

    How can I set one style to override another conflicting style in CSS?

    Show image when hovering on a span

    How to specify a device-specific css file when I compress all the css files using pipeline in Django?

    How do I get my header to align with my navigation bar at the center of my page?

    CSS: how do I add Twitter Bootstrap to an existing web page with it's own CSS?

    How to reset the CSS of HTML Elements?

    CSS - How to float correctly into pseudocolumns

    how to set a radio button state to checked with css?

    CSS: How to decrease the margin of my paragraphs inside a div?