SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist perpetual_dream's Avatar
    Join Date
    Nov 2005
    Location
    Jerusalem
    Posts
    542
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css positining question?

    Hey....
    I would like 2ask about margins.... margins are put in reference to other positioned elements or to the document itself....
    for example here:
    Code:
    body {margin:0px; padding:0px; font: 1.0em verdana, arial, sans-serif; }
    div#header {height:60px; background-color:#FFC; text-align:center;}div#header h1 {width:18em; margin-top:0; margin-right:auto; margin-left:auto; 
    		font: 1.2em bold "comic sans MS", arial, sans-serif;  text-align:center; 
    		padding:0 0 .1em; border-top:2px solid #069; border-bottom:1px solid #069;}
    div#nav {position:absolute; left:0px; top:100px; width:150px;
    				padding:.5em 0 0 0; margin:22px 0 0 15px; 
    				border-top:2px solid #069; border-bottom:1px solid #069;}
    div#nav ul {margin-top:0; margin-bottom:.8em;}
    div#nav li {margin-bottom:.5em; font-weight:bold; font-size:.75em;}			
    div#content {margin:20px 150px 0 165px; padding: 0 1em;}
    div#content h1{font-size:1em;}
    div#content p {font-size:.8em;}	
    div#content li {font-size:.75em;}
    div#rightcolumn {position:absolute; width:125px; top:100px; right:0px;  
    		margin:00px 0px 0 0; padding:1em  .5em; border-top:2px solid #069; border-bottom:1px solid #069;}
    div#rightcolumn p {font-size:.75em;}
    The rightcolumn margins r in reference to the document 0 0 point or to the positioned elements...?
    Tanzeelnet - Best arabic downloadsite
    Linux Hosting |Free Downloads |

  2. #2
    SitePoint Enthusiast icovey's Avatar
    Join Date
    Jul 2006
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It depends on how the <div> element is nested in your html.

    The margins of the <div id="rightcolumn"> will be calculated relative to the 0 0 point of it's parent element. If you nest it as a child of the body element it will be relative to the top-left of the screen, if it is nested in another <div> it will be relative to the top-left of that element.

    You also need to think about the padding of the parent element as this will have an effect on its content

    Cheers,
    Cheers,
    Ian.

    7879 | Web Marketing Lichfield

  3. #3
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you position something absolutely, its margins won't have any effect because it is taken out of the normal flow of the document. Wherever possible, try to position elements with their margins without any position: absolute/relative. For your nav and right column, you'll be better off using floats instead.


Bookmarks

Posting Permissions

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