SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard Another Designer's Avatar
    Join Date
    May 2005
    Posts
    1,369
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Why won't DIV position down on page 25%?

    I am trying to get a div to position down the page. I also want the div to be center in the page. I for it to center in the page by selecting margin: 0; However, I can't get the same container div to position down the page. Below is the css. It's the div named container. Thanks for your help.

    body {
    background-image: url(images/background.jpg);
    background-repeat: repeat;
    background-attachment: fixed;
    font-family: "Times New Roman", Times, serif;
    font-size: 14pt;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    color: #000;
    border-top-width: 400px;
    }

    .container {
    margin:auto;
    width: 790px;
    height: 650px;
    float: none;
    top: 25%;
    }


    .logoholder {
    width: 790px;
    }
    .mainpagephoto {
    width: 923px;

    padding: 0px;
    width: 790px;
    }
    .navigatestripe {
    width: 790px;

    font-family: "Times New Roman", Times, serif;
    font-size: 18pt;
    color: #FFF;
    font-weight: normal;
    font-variant: normal;
    height: 44px;
    text-align: center;
    font-style: normal;
    line-height: normal;
    text-transform: none;
    vertical-align: middle;
    padding-top: 17px;
    }
    .mainpagetext {
    font-family: "Times New Roman", Times, serif;
    font-size: 14pt;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    color: #FFF;
    width: 50%;
    padding: 9px;

    }
    .ownerphoto {
    float: right;
    height: 315px;
    width: 243px;

    }
    .copyrightnotice {
    width: 790px;
    font-family: "Times New Roman", Times, serif;
    font-size: 10pt;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-align: center;
    color: #FFF;
    line-height: normal;
    text-transform: none;
    position: relative;
    }
    .webdesigncreditfooter {
    font-family: "Times New Roman", Times, serif;
    font-size: 12pt;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: normal;
    text-align: center;
    color: #FFF;
    position: relative;
    padding: 4px;
    }

  2. #2
    SitePoint Wizard Another Designer's Avatar
    Join Date
    May 2005
    Posts
    1,369
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    PLEASE! I really need help. How do I get this div container to stay in the center and position it down the page where I want it?
    I would appreciate any help. Thanks.

    SEE PAGE HERE

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,732
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    Add these declarations:
    Code:
    html{height:100%;}
    body{min-height: 650px;}
    .container {
    position:relative; 
    margin:-325px auto 0 auto;
    float: none;
    top: 50%;
    }
    hope that helps

  4. #4
    SitePoint Wizard Another Designer's Avatar
    Join Date
    May 2005
    Posts
    1,369
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    Add these declarations:
    Code:
    html{height:100%;}
    body{min-height: 650px;}
    .container {
    position:relative; 
    margin:-325px auto 0 auto;
    float: none;
    top: 50%;
    }
    hope that helps
    That didn't work. All it did was make the div container go flush to the right of the browser. .

  5. #5
    SitePoint Wizard Another Designer's Avatar
    Join Date
    May 2005
    Posts
    1,369
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Sigh.... okay I got it about 5% down. But now I can't get it centered. I am new to CSS and I'm kind of thick. This is driving me crazy.

    DRIVING ME CRAZY

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Your link isn't working for me. Is the site up?

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,732
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    Updated solution:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title></title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<style type="text/css">
    html, body{height:100%; padding:0; margin :0; min-height: 650px;}
    body{ background: #555;     }
    .container {
    position:relative; 
    margin:-325px auto 0 auto;
     float: none;
    top: 50%;
    height:650px;
    width:650px; 
    background: pink;
    }	</style>
    	</head>
    	<body>
    <div class="container">your page content</div>
    	</body>
    </html>
    So you can see it in action. Make sure you aren't overriding declarations and your rules aren't conflicting with each other in your CSS.


Tags for this Thread

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
  •