CODEWITHSUNDEEP
csshtmlpositionpositioning
classA
classA

Reputation: 87

Display div at top of page?

Basically, the current setup has space between the top of the page and the #header div. I want to remove that space. Tried searching, came up with adding

position:absolute;top:0;left:0;

to the #header div, it works (positions it at the top without space) but the rest of my divs loose all their structure. How to position it at the very top and preserve the current layout of the rest of the divs?

I am also using an image underneath the divs as a background. Using this code.

body
{
background-image:url('../imagez/bestone1400.jpg');
background-repeat:no-repeat;
background-position:top, center;background-size:100%; 2000px;
}

Thanks in advanced.

#container
{
width:100%;
}

#header
{
background-color:#FFA500;
height:400px;
}

#leftcolumn
{
background-color:#FFD700;
height:200px;
width:10%;
float:left;
}

#content
{
background-color:#EEEEEE;
height:200px;
width:80%;
float:left;
}

#rightcolumn
{
background-color:#FFD700;
height:200px;
width:10%;
float:right;
}

#footer
{
background-color:#FFA500;
clear:both;
text-align:center;
}

Upvotes: 0

Views: 1531

Answers (2)

aguynamedloren
aguynamedloren

Reputation: 2273

There is likely padding or margin on html or body. Try something like:

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

There may also be padding or magins on divs or other elements, so a universal selector might work:

* {
  padding: 0;
  margin: 0;
}

But it is generally good practice to implement a css reset, like this one, which may be the best solution.

Upvotes: 1

Jayaram
Jayaram

Reputation: 760

You should remove the Default browser padding, margin and border, use:

/*reset default browser settings */
html, body {
 margin: 0px;
 padding: 0px;
 border: 0px;
}

Upvotes: 0

Related Questions