www.webdeveloper.com
Results 1 to 10 of 10

Thread: How to fix DIV to the top?

  1. #1
    Join Date
    Sep 2005
    Posts
    1,636

    Question How to fix DIV to the top?

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

    * {
      
    margin0;
      
    padding0;
    }
    body{
      
    background#FF0000 url(../images/bgimage.gif) repeat-x top;
      
    margin-top:0px;
    }

    #content {
    position:relative;
      
    width1000px;
      
    margin-top:0;
      
    padding-top:0;
    }
    #main {
      
    margin0;
      
    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.

  2. #2
    Join Date
    Dec 2005
    Posts
    2,984
    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.

  3. #3
    Join Date
    Sep 2005
    Posts
    1,636

    Question

    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[*/
    * {
      
    margin0;
      
    padding0;
    }
    body{
      
    background#FF0000 url(../images/bg1.gif) repeat-x top;
      
    margin-top0px;
    }
    #mycontent1 {
      
    background-positiontop left;
      
    width1008px;
      
    margin0 0 0 0;
    }
    #topsection {
      
    positionrelative;
      
    width1008px;
      
    height121px;
      
    margin-top0;
      
    padding-top0;
    }
    #header1 {
      
    background#003559 url(../images/banner.gif) no-repeat center top;
      
    margin-top0;
      
    height121px;
    }
    #middle {
      
    width100%;
      
    margin0;
      
    padding0 0 0 2px;
      
    text-alignleft;
      
    border0px solid #000000;
      
    overflowhidden;
    }
    /*]]>*/
    </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

  4. #4
    Join Date
    Dec 2005
    Posts
    2,984
    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).

  5. #5
    Join Date
    Sep 2005
    Posts
    1,636
    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)

  6. #6
    Join Date
    Oct 2008
    Location
    moreno valley, California ,usa
    Posts
    161
    You might try using negative values in your css for #mycontent:
    #mycontent {
    position: relative;
    top: -10px;
    ...

    }

  7. #7
    Join Date
    Sep 2008
    Location
    Connecticut
    Posts
    123
    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;
    }

  8. #8
    Join Date
    Jun 2010
    Posts
    65
    Sorry to hijack the thread but what is * ?

    Is that a shortcut for body instead?
    Thanks

  9. #9
    Join Date
    Dec 2005
    Posts
    2,984
    Universal selector - properties applied to * are applied to every applicable element.

  10. #10
    Join Date
    Sep 2008
    Location
    Connecticut
    Posts
    123
    AJ, love your registered MSIE hater. I'm jealous...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles