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 to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    positioning help

    I am trying to avoid using absolute positioning so the layout stays centered in all browsers. I chose random background colors for the divs so you could see the problem. I am trying to get the blue box to align at the very top of the layout. The pink box needs to be under the banner (the banner is the grey box).

    http://obsidianskies.webs.com/ffffffffff.htm

    how do I align the blue box at the top?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Site Tittle</title>
    <style type="text/css">
    body
    	{
    	background-image:url("http://i53.tinypic.com/4u6mvb.jpg");
    	background-repeat:repeat-y;
    	background-position:50% 50%;
    	margin:0px;
    	padding:0px;
    	background-color:#555555;
    	font-family:Verdana, Geneva, sans-serif;
    	font-size:11px;
    	color:#000000;
    	}
    #banner
    	{
    	display:block;
    	margin:0 auto;
    	}
    #align-1
    	{
    	margin-left:-213px;
    	}
    #align-2
    	{
    	margin-left:-213px;
    	}
    #main-wrapper
    	{
    	display:block;
    	margin:0 auto;
    	width:627px;
    	overflow:auto;
    	height:100px;
    	background-color:pink;
    	}
    #fix
    	{
    	display:table;
    	margin:0 auto;
    	width:841px;
    	background-color:green;
    	height:100px;
    	}
    #align-3
    	{
    	margin-left:1px;
    	}
    #nav-wrapper
    	{
    	float:right;
    	width:213px;
    	overflow:auto;
    	height:100px;
    	background-color:blue;
    	}
    </style>
    </head>
    <body>
    
    <div id="align-1"><img src="http://i53.tinypic.com/23swtxv.jpg" id="banner" alt="banner"></div>
    
    <div id="align-2"><div id="main-wrapper"></div></div>
    
    <div id="align-3"><div id="fix"><div id="nav-wrapper"></div></div></div>
    </body>
    </html>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello justbreathe,
    A 2 column layout is what you really need here. Your markup is laid out like your building it all with absolute positioning and that doesn't work when you want the elements to flow naturally.

    Have a look at how to build a basic 2 column layout.

    Try something like this to start with -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #fc6 url(http://i53.tinypic.com/4u6mvb.jpg) repeat-y center;
    }
    #container {
    	width: 841px;
    	margin: 0 auto;
    	overflow: auto;
    }
    #left {
    	width: 627px;
    	float: left;
    }
    	#align-1 {
    		height: 338px;
    		background: #ccc;
    	}
    	#align-2 {
    		height: 100px;
    		background: #f9f;
    	}
    	#align-3 {
    		height: 100px;
    		background: #0f0;;
    	}
    #right {
    	margin: 0 0 0 628px;
    }
    	#nav-wrapper {
    		height: 100px;
    		background: #00f;
    	}
    </style>
    </head>
    <body>
        <div id="container">
        	<div id="left">
                <div id="align-1"></div>
                <div id="align-2"></div>
                <div id="align-3"></div>
            <!--end left--></div>
            	<div id="right">
                	<div id="nav-wrapper">
                    <!--end nav-wrapper--></div>
                <!--end right--></div>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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