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

    More on aligning and fitting divs

    This was almost perfect and then I changed something and it began to collapse. I only made one change at a time and still don't know what happened. Firefox displays the window almost perfectly, IE7 is garbage. The menu will not move to the left. The maincontent div should span to the edge of the window.

    I'm hoping one of you can see what happened and help me figure out how to make it look good in Firefox or IE7.
    Code:
    body{
    	margin:0;
    	padding:0;
    	background-color:#FF66FF;				/* pink */
    	color:#000000;
    	font-family:Verdana, Arial, sans-serif;
    }
    /*This is the base div style.  At the moment it is just being used for the background-color.  The individual background-color overwrites this style. */
    div{
    	background-color:#C8BBBE;
    }
    /* This wrapper is needed so there is control over the subsequent divs relative to this one.  Maybe could have made everything relative to the body, but I couldn't get it to work right. */
    div#wrapper{    				
    	position:fixed;			/*Since this is the foundation I gave it a fixed position.  It isn't going to move anywhere. */
    	top:0;			
    	left:0;		
    	width:98%;				/* Equal to the width of the container div. */		
    	height:98%;			/* Equal to the height of the container div. */
    	background-color:gray;	/*This gets changed for the final cut. */
    }
    /* The header contains 5 divs.  3 Foundation divs and 2 sub divs in two of the foundation divs.*/
    div#header{  
    position:absolute;  	
    top:0px;	
    left:0px;	
    width:100%;	
    height:15%;
    text-align:left;
    background-color:black;
    }	
    /*The logo is the full height of the header */
    div#logo{    
    	float:left;	
    	top:0px;	
    	left:0px;	
    	width:14.4%;
    	padding-left:.5em;	
    	height:100%;	
    	background-color:green;
    }
    /*This is a container for the name and motto divs */
    div#center-header{
    	position:absolute;
    	top:0;
    	left:14.4%;
    	width:74%;
    	height:100%;
    	background-color:#00CC33;		/* a different green */
    }
    /*The company div is separate so the name and a background image can go here and it will appear nowhere else. */
    div#coName{
    	position:absolute;
    	top:0;
    	left:0;
    	width:100%;	
    	height:50%;	
    	text-align:center;
    	background-Color:#660033;	/* rust */
    }	
    /*Included for some kind of tag line. */
    div#motto{
    	position:absolute;
    	top:50%;
    	left:0;
    	width:100%;	
    	height:50%;	
    	font-style:italic;	
    	text-align:center;
    	background-color:#990099;
    }
    /*This div contains two divs. */
    div#status{
    	position:absolute;
    	top:0;
    	left:84.6%;
    	height:100%;
    	width:14.4%;
    	text-align:right;	
    	background-color:#660066;
    }	
    /*Upper stats will display the username and a howdy.  Also will display info such as order placed, order pending, payment made, etc. */ 
    div#upperStats{
    	position:absolute;
    	top:0;  
    	left:0;
    	height:50%;
    	width:100%;
    	padding-right:10%;
    	background-color:#330066;	
    }
    /* For now just a clock.  Room for more later if we need it */
    div#timestamp{    
    	position:absolute;
    	top:50%;
    	left:0;
    	height:50%;	
    	width:100%;
    	padding-right:10%;
    	background-color:#330099;
    	text-align:bottom;
    }
    /* The navbar contains divs for the menu, a log on form, and links to firends i.e. ICEA, Chamber of Commerce and Traingle Directory */
    div#navbar{    
    	position:absolute;	
    	top:15%;	
    	left:0px;	
    	width:14%;	
    	height:75%;
    	padding-left:.2em;
    	background-color:#33FF99;	
    }
    /*Contains the ul menu */
    div#menu{
    	position:absolute;
    	left:0;
    	top:0;	
    	width:100%;	
    	height:35%;
    	text-align:left;
    	background-color:#990033;
    }
    /*Just use an unordered list for the menu.  The javscript function menuops will handle the actual post of the hidden form. */
    #menu ul {
    	position:absolute;
    	top:1em;
    	left:0;
    	width:10em;	
    	left:0;	
    	cursor:pointer;	
    	list-style:none;
    }
    /*This controls the appearance of the items in the menu.  Colors, fonts and font decoration as well as the separation between each item. */
    #menu li {	
    	left:0;	
    	color:black;	
    	list-style-type:none;	
    	display:block;
    	text-align:left;
    	margin-bottom:.2em;
    	background-color:#996633;
    }
    /*This controls the appearance of each item when the cursor passes over the item. */
    #menu li:hover {	
    	background-color:#00ffff;	
    	font-style:italic;	
    }
    /*When the index is loaded the post is checked to see if menuitem is set.  If so it will set the class currentpage to the chosen page and it will be displayed with a wide
    	right margin and in bold which will act as a visual prompt to the user telling them where in the web site they currently are. */
    .currentpage{	
    	background-color:#708090;
    	border-right:2em black solid;	
    	font-weight:bold;	
    	color:#0000ff;	
    }
    /*A div for the login form, and the friends links and images */			
    div#otherlinks{    
    	position:absolute;	
    	top:35%;	
    	left:0;	
    	width:98%;	
    	height:100%;	
    }
    /*A simple 3 field form for logging into the site. */	
    div#loginform{
    	position:absolute;
    	left:0;	
    	top:0;
    	width:100%;	
    	height:20%;	
    	font-family:verdana;	
    	font-size:8pt;	
    	background-color:#99FFFF;
    }
    /*A div for the links and images to our friends. */
    div#friends{
    	position:absolute;
    	top:22%;
    	left:0;
    	width:98%;
    	height:10%;
    	border:thin red solid;
    
    }	
    /*The main content div is special.  It is allowed to expand beyond the lower border of the window.  When it does a vertical scroll bar will appear on the right hand side. 
    /For this to work right it has to extend to the far right of the browser window (the wrapper div in this case) so that the scroll bar doesn't appear within the readable area of the window.  The way the divs are set up the
    /calendar div will stay on top of the maincontent div.  This allows the appearance of a screen with a separated scroll bar controling a window to the left of a separate column.  The paragraphs in the maincontent windows MUST
    /have a class of maintext to prevent them from running underneath the calendar column. */
    div#maincontent{    
    	position:absolute;	
    	top:15%;	
    	left:14.4%;	
    	width:79.4%;	
    	height:75%;	
    	padding-right:5%;
    	padding-left:.5em;
    	margin-left:.2em;	
    	overflow:auto;
    	border:thin solid green;
    }
    /*Added this column to balance the view.  It is heavy on the left.  A calendar can be placed in this column (as well as anything else). */
    div#calendar{
    	position:absolute;
    	top:15%;
    	left:84.6%;
    	width:13.4%;
    	height:75%;
    	padding-right:.2em;
    	overflow:auto;
    	background-color:blue;
    }
    /*A standard footer.  Displays copyright info.  Should also have a link to the privacy statement.  Can also contain links to other friends not in the concierge business, such as graphic artists, whatever. */
    div#footer{
    	position:absolute;
    	left:0;
    	top:91%;
    	width:100%;
    	height:9%;
    	background-color:#FFFFCC;
    }
    /*  In order for text to appear properly in the maincontent window every paragraph must have this class.  This class limits the width of the paragraph to the width between the navbar and the calendar column even though the /maincontent div goes all the way to the right border of the view. Just remember to put <p class="maintext"> at the beginning of each paragraph and </p> at the end of each paragraph.  Handle the text font, size and other special 
    /formatting with span classes (i.e. <span class="myformat">  </span> within the individual paragraphs. */
    .maintext{
    	width:74%;
    }
    The HTML.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title>Test Divs</title>
    	<link rel="stylesheet" type="text/css" href="layoutStyles.css" />	<!--Required for the layout of the site and only the layout. -->
    	<!--<link rel="stylesheet" type="text/css" href="primaryStyles.css" />						<!--Required for the appearance of individual items such as font, paragraphs, text-decoration
    																		and the like.  Exception - All paragraphs in the main pages must have the class "maintext" applied.  This
    																		is neccessary for the window to appear correctly, so that style is included in the layoutStyles. -->
    </head>
    <body>
    <!-- The wrpper is home to all of the subsequent divs -->
    <div id="wrapper">
    	<div id="header">
        	<div id="logo">div logo</div>
    		<div id="center-header">
    	    	<div id="coName"><span class="bigtext">div coName</span></div>
    	    	<div id="motto">div motto</div>
    		</div>
    		<div id="status">
    			<!-- 	php will handle the details of the data shown in this div.  Either it will be a basic 'hello guest' or it will welcome a returning customer
    				who has just logged in.  Other details such as: Order Pending, Order Completed, Private Message Waiting, etc. can go here. -->
    	    	<div id="upperStats">div upperstats</div>
    			<!--The javascript digital clock will display the time here. -->
    			<div id="timestamp">div timestamp</div>
        	</div>
    	</div>
    	<div id="navbar">
    		<div id="menu">
    			<ul>
    				<!-- 	Individual menu items will actually be written by php.  The items come from the menu table in the database.  To display an item use phpmyadmin to turn the flag itemAttribute to Y.
    					admin menu items are flagged with the admin attribute turned on to Y and authorized after checking the DB.  If the menuaction in the POST variable is set, that particular item will have 
    					the class, currentpage, set.  This will cause the individual item to appear differently.  In lieu of "breadcrumbs"-->
    			    <li>Menu Item</li>
    			    <li>Menu Item</li>
    			    <li>Menu Item</li>
    			    <li>Menu Item</li>
    				<li class="currentpage">Menu Item</li>
    				<li>Menu Item</li>
    			</ul>
    			<!-- This invisible form is submitted when the user clicks on the menu item.  The javascript function menuops handles the navigation once the field menuaction is set. -->
    			<form action="" id="menuForm" method="post">
    				<input type="hidden" name="menuaction">
    			</form> 
    		</div>
    		
    		<!-- This div is home to the rest of the left column stuff such as links to friends, the login form and whatever else ends up getting put here. -->
    		<div id="otherlinks">
    			<div id="loginform">
    				Links, sign in and Images
    				<form action="" id="loginForm" 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 id="friends">
    				<img name="iceadiv" src="icealogo.gif" width="75" height="60" alt="ICEA Logo" /><br />
    				<img name="cocdiv" src="coclogo.jpeg" width="75" height="60" alt="COC Logo" /><br />
    				<img name="trainglediv" src="conciergedir.jpg" width="75" height="65" alt="Traingle Logo" /><br />	
    			</div>
    		</div>
    	</div>
    	<!-- Items appearing in the maincontent div will be there after a php switch is run and a separate file gets included.  The text below is only there for testing.  -->
    	<div id="maincontent">
    		<p class="maintext">On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look. You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly. To change the overall look of your document, choose new Theme elements on the Page Layout tab.</p>
    
    <p class="maintext">To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command. Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original contained in your current template. On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look. You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab.</p>
    
    <p class="maintext">Most controls offer a choice of using the look from the current theme or using a format that you specify directly. To change the overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command. Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original contained in your current template. On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.</p>
    
    <p class="maintext">You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly. To change the overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command. Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original contained in your current template. On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document.</p>
    
    <p class="maintext">You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look. You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly. To change the overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command.</p>
    
    <p class="maintext">Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original contained in your current template. On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look. You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly.</p>
    <p class="maintext">To change the overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command. Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original contained in your current template. On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look. You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab.</p>
    <p class="maintext">You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly. To change the overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command. Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original contained in your current template. On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks.</p>
    
    	</div>
    	
    	<div id="calendar">
    		Calendar and events goes here
    	</div>
    	
    	<div id="footer">
    		Here is some non-changing footer info.
    	</div> 
    </div>
    </body>
    </html>
    Thanks for the input.
    Scott Stewart
    Always happy to learn from pros.

  • #2
    New Coder
    Join Date
    Jan 2007
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Can we see a live version or screen shot(s) ?

  • #3
    Regular Coder
    Join Date
    Nov 2002
    Posts
    567
    Thanks
    2
    Thanked 4 Times in 4 Posts
    No I had to take the site down because I don't want the world to see crap. I do my testing on my localhost. You can just open them with IE or FF since there is no PHP as yet.
    Scott Stewart
    Always happy to learn from pros.

  • #4
    Regular Coder
    Join Date
    Nov 2002
    Posts
    567
    Thanks
    2
    Thanked 4 Times in 4 Posts
    Just wanted to add to this in case someone is searching this forum for answers. I got everything to fit nicely and behave the way I want in FF and IE7. In a previous post someone had mentioned not using the doctype that I had, maybe they just said not to use strict. In any case I took it out since I didn't have any XML. The lack of the doctype caused IE7 to ignore some of the CSS. I don't know why. So I put it back and it immediately fixed the problem.
    Scott Stewart
    Always happy to learn from pros.

  • #5
    New Coder
    Join Date
    Jan 2007
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So you had no doctype, but when you added one, it worked?

    I believe that means the browsers were rendering in quirks and not standards mode


  •  

    Posting Permissions

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