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
    Regular Coder
    Join Date
    Nov 2002
    Posts
    567
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Positioning these divs

    OK. If you've seen my previous posts you will know that I am attempting to redo the way my divs are positioned on the page. So I have the bare bones page set up as below and the corresponding css. I am just working with the header at the moment. The header should have a div where the company logo can go. Then in the middle of the header two divs, one above the other, then finally a last div where there are two stacked one above the other. You can tell by the way I have the html organized how it should be. The problem is the company name and motto are falling below the whole header. It was my understanding that the relative positioning is relative to the containing div and the other divs within the containing div based on read order.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    	<title>Test Divs</title>
    	<link rel="stylesheet" type="text/css" href="newStyles.css" />
    </head>
    <body>
    <div id="wrapper">
    	<div id="header">
        	<div id="logo">a logo spot</div>
    		<div id="center-header">
    	    	<div id="coName"><span class="bigtext">a company name spot</span></div>
    	    	<div id="motto">a tag line spot</div>
    		</div>
    		<div id="status">
    	    	<div id="upperStats">stats for user</div>
    			<div id="timestamp">where the clock goes</div>
        	</div>
    	</div>
    <!--	<div id="navbar">
    		<div id="menu">
    			<ul>
    			    <li>Menu Item</li>
    			    <li>Menu Item</li>
    			    <li>Menu Item</li>
    			    <li>Menu Item</li>
    			</ul>
    			<form action="" id="menuForm" method="post">
    				<input type="hidden" name="menuaction">
    			</form> 
    		</div>
    		<div id="otherlinks">
    			Links, sign in and Images
    			<form action="" method="POST">
    				User ID:<input type="input" name="UserID" size="15" class="smallText" />
    				Password:<input type="password" name="Password" size="15" class="smallText" />
    				<input type="hidden" name="menuaction" value="login" />
    				<input type="submit" name="submit" value="Go">
    			</form>
    		</div>
    	</div>
    	<div id="maincontent">
    		Main content goes here.
    	</div>
    	<div id="footer">Here is some non-changing footer
    		<div id="prompt" name="prompt">
    			Checking Session for user. <br />Guest
    		</div>
    	</div> 
    -->
    </div>
    </body>
    </html>
    And the CSS
    Code:
    body{    
    	margin:0px;
    	padding:0px;
    	background-color:#C8BBBE;	
    	color:#000000;
    	font-family:Verdana, Arial, sans-serif;
    }
    /* default for all divs */
    div{				
    	margin:0px;
    	padding:0px;
    }
    div#wrapper{    
    position:fixed;	
    top:0;	
    left:0;		
    width:100%;	
    height:100%;
    background-color:gray;
    }
    div#header{    
    position:relative;	
    top:0px;	
    left:0px;	
    width:100%;	
    height:15%;
    background-color:blue;
    }	
    div#logo{    
    position:relative;	
    top:0px;	
    left:0px;	
    width:14.4%;	
    height:100%;	
    background-color:green;
    }
    div#center-header{
    	position:relative;
    	top:0px;
    	left:14.4%;
    	width:71.75%;
    	height:100%;
    	background-color:#00CC33;
    }
    div#coName{    
    position:relative;		
    width:71.75%;	
    height:15%;	
    text-align:center;
    background-Color:#660033;	
    }	
    div#motto{    
    position:relative;	
    left:14.76%;	
    top:6%;	
    width:71.75%;	
    height:5%;	
    font-style:italic;	
    text-align:center;
    background-color:#990099;
    }
    div#status{    
    position:relative;	
    top:5px;	
    left:86.5%;	
    height:15%;	
    text-align:right;	
    background-color:#660066;
    }	
    div#upperStats{    
    position:relative;	
    top:0;	
    left:86.5%;	
    width:12%;	
    height:11%;
    background-color:#330066;	
    }
    div#timestamp{    
    position:relative;	
    top:6.25%;	
    left:86.5%;	
    width:12%;	
    height:3%;	
    text-align:right;
    background-color:#330099;
    }
    The percentages were left over from the previous style sheet and just copied with the rest. I'll be working on that while I get the positioning fixed. I just read something about float, so I may have to add a float to these. Any input would be appreciated.
    Scott Stewart
    Always happy to learn from pros.

  • #2
    New Coder
    Join Date
    Sep 2007
    Posts
    13
    Thanks
    0
    Thanked 2 Times in 2 Posts
    not sure but is this what ur looking for?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    	<title>Test Divs</title>
    	<style type="text/css">
    		body { margin:0; text-align:center; }
    
    		#header p { margin:0 10px; }
    
    		#header { margin:0 auto; width:800px; height:100px; background:red; text-align:left; }
    
    		#logo { background:blue; width:200px; height: 100px; float:left; }
    
    		#mid-top {width:300px; height:50px; background:#ccc; }
    
    		#mid-bot { width:300px; height:100px; background:#333; float:left;  }
    
    		#right-top {width:300px; height:50px; background:#0f0; }
    
    		#right-bot { width:300px; height:100px; background:#030; float:left;  }
    	</style>
    </head>
    <body>
    	<div id="header">
    		<div id="logo"><p>logo</p></div>
    		<div id="mid-bot">
    			<div id="mid-top"><p>stuff</p></div>
    			<p>stuff</p>
    		</div>
    		<div id="right-bot">
    			<div id="right-top"><p>stuff</p></div>
    			<p>stuff</p>
    		</div>
    	</div>
    </body>
    </html>


  •  

    Posting Permissions

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