CODEWITHSUNDEEP
htmlcssheaderalignment
user1817311
user1817311

Reputation:

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

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

Upvotes: 0

Views: 4946

Answers (5)

Vadivel S
Vadivel S

Reputation: 660

body {    margin: 0;    padding: 0; }

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

Upvotes: 0

user2439358
user2439358

Reputation: 1

  • {margin:0px; padding:0px;} body, html {margin:0px; padding:0px;}

Mention this code is css to solve the problem

Upvotes: 0

Alex
Alex

Reputation: 996

Apply style margin:0; to the body element.

body{
   margin:0;
}

For more information on margin property you can check out this page: http://www.tutorialrepublic.com/css-reference/css-margin-property.php

Upvotes: 0

Roy Sonasish
Roy Sonasish

Reputation: 4609

mention 

*{
    padding:0;
    margin:0;
}

in you css file

this will prevent default padding and margin of all block elements.

Upvotes: 0

Jaime Gris
Jaime Gris

Reputation: 1126

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

body {
   margin: 0;
   padding: 0;
}

Upvotes: 1

Related Questions