Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Div not touching the edges of the page

    Hi

    I'm trying to make my div (fullscreen) touch the edges of the web browser at both the top and the bottom.

    http://img88.imageshack.us/img88/899...10804at224.png

    http://img31.imageshack.us/img31/206...10804at225.png

    This is the html I'm using:

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Ben Lambe | Creative Designer</title>
    
    <link rel="stylesheet" href="css.css" type="text/css">
    
    </head>
    <body>
    <div class="fullscreen">
    <div id="logo"><a href="index.html"><img src="images/logo-2.png"/></a></div>
    
    <div id="menu_wrapper" class="grey">
    			<div class="left"></div>
    			<ul id="menu">
    				<li><a href="contact.html">Contact</a></li>
    				<li><a href="blog/index.html">Blog</a></li>
    				<li><a href="portfolio.html">Portfolio</a></li>
    				<li><a href="about.html">About</a></li>
    				<li><a href="index.html">Home</a></li>
    			</ul>
    		</div>
    And my CSS:

    Code:
    body{ height:100%;
    background:url(images/new-background.png);
    }
    
    
    div.fullscreen{
    	background:url(images/texture.png);
        position:relative;
    	margin-left:auto;
    	margin-right:auto;
    	margin-top:auto;
    	margin-bottom:auto;
    	padding-bottom:0px;
    	padding-top:0;
        width:1000px;
        height:100%;
      }
      
    
    #logo {
    position:relative;
    width:268px;
    height:42px;
    text-decoration:none;
    left:20px;
    top:47px;
    z-index:2;
    }
    
    			#menu {
    				font-family: Helvetica, sans-serif;
    				text-transform: uppercase;
    				position:relative;
    				bottom:42px;
    				margin: 0px 0;
    				padding: 0;
    				list-style-type: none;
    				font-size: 15px;
    				background-color:#ae4141;
    				height: 136px;
    				z-index:1;
    			}
    			#menu li {
    				float: right;
    				margin: 0;				
    			}
    			#menu li a {
    				text-decoration: none;
    				display: block;
    				padding: 0 20px;
    				line-height: 136px;
    				color: #999;
    			}
    			#menu li a:hover {
    				background-image:url(images/menu.png);
    				height:136px;
    				color: #ffffff;
    			}
    If anybody knows how I can fix this that would be great.

  • #2
    Regular Coder Mooseman's Avatar
    Join Date
    Sep 2010
    Posts
    123
    Thanks
    7
    Thanked 3 Times in 3 Posts
    Try changing margin-top:auto; to margin-top: 0;

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It worked, thank you.

  • #4
    Regular Coder Mooseman's Avatar
    Join Date
    Sep 2010
    Posts
    123
    Thanks
    7
    Thanked 3 Times in 3 Posts
    No problem


  •  

    Posting Permissions

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