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 2 of 2
  1. #1
    New Coder
    Join Date
    Feb 2011
    Posts
    48
    Thanks
    5
    Thanked 2 Times in 2 Posts

    Positioning help

    I'm trying to accomplish a simple layout with a full width header, 984 center column with a horizontal and vertically centered presentation div and a bottom footer.. does anyone know away to keep the center ap div from going off the screen when when the window is resized, I would also like the divs not to overlap all together.. which is happening because of the ap/fixed positioning.. Am I approaching this complety backwards? I've tried many css approches that didn't pan out :/

    This is what I've done so far ..
    Code:
    <!DOCTYPE html>
    <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
    <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
    <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
    <!--[if gt IE 8]><!-->
    <html class="no-js">
    <!--<![endif]-->
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="css/type.css">
    <!--<link rel="stylesheet" href="css/zxc.css">
    -->
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/*** SEE BELOW *** ">
    <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
    <!--sticky footer-->
    <script type="text/javascript">
    function positionFooter() { var mFoo = $("#footer"); if ((($(document.body).height() + mFoo.height()) < $(window).height() && mFoo.css("position") == "fixed") || ($(document.body).height() < $(window).height() && mFoo.css("position") != "fixed")) { mFoo.css({ position: "fixed", bottom: "0px" }); } else { mFoo.css({ position: "static" }); } } $(document).ready(function () { positionFooter(); $(window).scroll(positionFooter); $(window).resize(positionFooter); $(window).load(positionFooter); });
    </script>
    
    <!--horiz & vert center div-->
    <script type="text/javascript">
    $(document).ready(function(){
    						   
    	$(window).resize(function(){
    
    		$('.centerBlock').css({
    			position:'absolute',
    			left: ($(window).width() - $('.centerBlock').outerWidth())/2,
    			top: ($(window).height() - $('.centerBlock').outerHeight())/2
    		});
    		
    	});
    	// To initially run the function:
    	$(window).resize();
    
    });
    </script>
    
    
    </head>
    <body>
    
    <!--[if lt IE 7]>
                <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
            <![endif]-->
    
    <div id="wrapper">
    <div id="headerWrap">
      <div id="header">header</div>
    </div>
    <div id="middleContainer" >
    <div id="messageWrap" class="wrapper-holder">
    <div id="messageBox" class="centerBlock">
      <h1>Header 1</h1>
    </div>
    <!--<div id="footerWrap">
    -->  <div id="footer">footer</div>
    <!--</div>
    --></body>
    </html>
    Code:
    #wrapper, #header, #headerWrap, #contentWrap, #middleContainer, #messageWrap, #messageBox, #footerWrap, #footer {
    	-moz-box-sizing: border-box;
    	-webkit-box-sizing: border-box;
    	box-sizing: border-box;
    }
    
    body, { background-color: #6CC; height: 100%; }
    
    #wrapper {
    	width: 100%;
    	height: 100%;
    }
    .wrapper-holder {
    	padding: 95px 0 50px;
    	vertical-align: middle;
    }
    #headerWrap {
    	width: 100%;
    	height: 110px;
    	background-color: #333;
    }
    #header {
    	width: 984px;
    	margin: 0 auto;
    	height: 110px;
    	background-color: #444;
    }
    #middleContainer {
    	width: 984px;
    	margin: 0 auto;
    	height: 100%;
    }
    #messageWrap {
    	width: 984px;
    	margin: 0 auto;
    	vertical-align: middle;
    }					
    #messageBox {
    	width: 984px;
    	margin: 0 auto;
    	padding: 50px 50px 50px 70px;
    	background-color: #F33;
    }
    #footer {
    	width: 984px;
    	margin: 0 auto;
    	height: 110px;
    	background-color: #FF6;
    	margin-top: 50px;
    	padding: 70px;
    }
    Last edited by neptune1; 12-20-2012 at 05:56 PM.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,762
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Code:
    <body>
    <div id="wrapper">
    <div id="headerWrap">
    <div id="header">header</div>
    </div>
    <div id="middleContainer" >
    <div id="messageWrap" class="wrapper-holder">
    <div id="messageBox" class="centerBlock">
    <h1>Header 1</h1>
    </div>
    <div id="footer">footer</div>
    </body>
    Missing three div end tags. Need to know where they go before looking at code.


  •  

    Posting Permissions

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