How to fix DIV to the top?

**toplisek** · 06-02-2010, 04:16 AM

I have designed simple sample for layout with body CSS and content like:

PHP Code:




* {

  margin: 0;

  padding: 0;

}

body{

  background: #FF0000 url(../images/bgimage.gif) repeat-x top;

  margin-top:0px;

}



#content {

position:relative;

  width: 1000px;

  margin-top:0;

  padding-top:0;

}

#main {

  margin: 0;

  padding:0;

}

Why is #content not aligned vertically to the top?
Seems some issue with body or #content...

How to move completely to the top this DIV element?
I have around 22px under top line.

**aj_nsc** · 06-02-2010, 07:12 AM

Got any markup to go with that CSS?

Also, you never need to apply margin:0; padding:0; to any element (like you have with main) after putting the following at the top of your CSS:

Code:

* { margin:0; padding:0; }

As that means that the margin and padding of every element will be set to 0.

**toplisek** · 06-02-2010, 08:06 AM

I try to be more clear:
I like to put header to the top.
Sems DIV puts some BREAK as block element.
how to put to the top my pure testing code:

PHP Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">



<head>

  <title></title>

<style type="text/css">

/*<![CDATA[*/

* {

  margin: 0;

  padding: 0;

}

body{

  background: #FF0000 url(../images/bg1.gif) repeat-x top;

  margin-top: 0px;

}

#mycontent1 {

  background-position: top left;

  width: 1008px;

  margin: 0 0 0 0;

}

#topsection {

  position: relative;

  width: 1008px;

  height: 121px;

  margin-top: 0;

  padding-top: 0;

}

#header1 {

  background: #003559 url(../images/banner.gif) no-repeat center top;

  margin-top: 0;

  height: 121px;

}

#middle {

  width: 100%;

  margin: 0;

  padding: 0 0 0 2px;

  text-align: left;

  border: 0px solid #000000;

  overflow: hidden;

}

/*]]>*/

</style>

</head>



<body>



<div id="mycontent1">

<div id="topsection">

<div id="header1">

&nbsp;

</div>

</div>



<div id="middle">

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

</div>



</div>



</body>

</html>

**aj_nsc** · 06-02-2010, 08:29 AM

Well, first of all it looks like you're probably using too many DIVs in your layouts. But that's not the point right now.

In your second post, what's the problem? What element are you looking to stick to the top?

I will say this again, if you are using * {margin:0; padding:0; } you do not need to declare margin:0 0 0 0; or padding: 0 0 0 0; on any element's because that's already done so (like you've done with #mycontent1 and #middle).

**toplisek** · 06-02-2010, 09:44 AM

I have deleted all.
Can you send me working my code with header #header1 {
background: #003559 url(../images/banner.gif) no-repeat center top;

completely to the top (no space...as it has to be touched to the top)

**captsig** · 06-03-2010, 12:57 PM

You might try using negative values in your css for #mycontent:
#mycontent {
position: relative;
top: -10px;
...

}

**optimus203** · 06-03-2010, 03:55 PM

Your second post seems to be working fine with me. What browser are you seeing the problem in?

If your still ahving problems, maybe try something like this:

#header1 {
position: absolute;
top: 0;
left: 0;
width: 1008px;
height: 121px;
background: #003559 url(../images/banner.gif) no-repeat center top;
}