www.webdeveloper.com
Results 1 to 8 of 8

Thread: how do i align two containers?

Threaded View

  1. #1
    Join Date
    Jan 2008
    Posts
    106

    how do i align two containers?

    here is the code
    when i open this file in firefox the alignment of the 2 containers are not the same

    i have attached the file just change the ".txt" into html and open it in firefox
    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>AguaFortuna</title>
    <style type="text/css">
    
    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */
    
    #tabs {
    	float:left;
    	width:100%;
    	font-size:93%;
    	line-height:normal;
    	border-bottom:1px solid #666;
    	margin-bottom:1em; /*margin between menu and rest of page*/
    	overflow:hidden;
    	}
    
    #tabs ul {
    	margin:0;
    	padding:10px 10px 0 0px;
    	list-style:none;
    	
    	}
    
    #tabs li {
    	display:inline;
    	margin:0;
    	padding:0;
    	}
    
    #tabs a {
    	float:left;
    	background:url("media/left.png") no-repeat left top;
    	margin:0;
    	padding:0 0 0 6px;
    	text-decoration:none;
    	}
    
    #tabs a span {
    	float:left;
    	display:block;
    	background:url("media/right.png") no-repeat right top;
    	padding:6px 15px 4px 6px;
    	margin-right:2px;
    	color:#FFF;
    	}
    
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabs a span {float:none;}
    
    /* End IE5-Mac hack */
    #tabs a:hover span {
    	}
    
    #tabs a:hover {
    	background-position:0% -42px;
    	}
    
    #tabs a:hover span {
    	background-position:100% -42px;
    	}
    
    body  {
    	font: 100% Verdana, Arial, Helvetica, sans-serif;
    	background: #666666;
    	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    	padding: 0;
    	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    	color: #000000;
    	background-color: #9BC4FF;
    }
    .twoColFixLt #container { 
    	width: 900px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
    	background: #FFFFFF;
    	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    	border: 1px solid #000000;
    	text-align: left; /* this overrides the text-align: center on the body element. */
    }
    .twoColFixLt #sidebar1 {
    	float: left; /* since this element is floated, a width must be given */
    	width: 150px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
    	background:#0066FF; /* the background color will be displayed for the length of the content in the column, but no further */
    	padding: 15px 10px 15px 20px;
    }
    .twoColFixLt #mainContent { 
    	margin: 0 0 0 180px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
    	padding: 0 20px 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
    } 
    .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    	float: right;
    	margin-left: 8px;
    }
    .fltlft { /* this class can be used to float an element left in your page */
    	float: left;
    	margin-right: 8px;
    }
    .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    	clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }
    .style1 {font-size: small}
    --> 
    </style><!--[if IE 5]>
    <style type="text/css"> 
    /* place css box model fixes for IE 5* in this conditional comment */
    .twoColFixLt #sidebar1 { width: 230px; }
    </style>
    <![endif]--><!--[if IE]>
    <style type="text/css"> 
    /* place css fixes for all versions of IE in this conditional comment */
    .twoColFixLt #sidebar1 { padding-top: 30px; }
    .twoColFixLt #mainContent { zoom: 1; }
    /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
    </style>
    <![endif]-->
    
    
    <SCRIPT Language="JavaScript">
    <!-- hide from old browsers
      function GetMonth(intMonth){
        var MonthArray = new Array("January", "February", "March",
                                   "April", "May", "June",
                                   "July", "August", "September",
                                   "October", "November", "December") 
        return MonthArray[intMonth] 	  	 
        }
      function getDateStr(){
        var today = new Date()
        var year = today.getYear()
        if(year<1000) year+=1900
        var todayStr = GetMonth(today.getMonth()) + " " + today.getDate()
        todayStr += ", " + year
        return todayStr
        }
    //-->
    </SCRIPT>
    
    
    <LINK REL="SHORTCUT ICON"
           HREF="media/icon/favicon.ico">
    <style type="text/css">
    <!--
    .style2 {color: #FFFFFF}
    .style6 {font-size: 75%}
    -->
    </style>
    </head>
    
    <body class="twoColFixLt">
    
    <div id="container">
      <div id="sidebar1">
        <h3 align="left" class="style2">Promo!!</h3>
        <p align="left" class="style2">3 for 100!</p>
        <p align="left" class="style2">*Free Delivery!</p>
        <p align="left" class="style2">&nbsp;</p>
        <p align="left" class="style2">&nbsp;</p>
        <p align="left" class="style2">P25 only for pickups!</p>
        <p align="left" class="style2">&nbsp;</p>
        <p align="left" class="style2">&nbsp;</p>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
      </div>
      <div id="mainContent">
        <h1><img src="media/agualogo.PNG" width="572" height="126" /></h1>
      <div id="tabs">
      <ul>
        <li></li>
        <li><a href="#"><span>Home</span></a></li>
        <li><a href="#"><span>Products</span></a></li>
        <li><a href="#"><span>Gallery</span></a></li>
        <li><a href="#"><span>Contact us</span></a></li>
      </ul>
    
      <div align="right"><em><span class="style1">
       Today is  
           <SCRIPT Language="JavaScript">
    <!-- hide from old browsers
        document.write(getDateStr())
    //-->
           </SCRIPT>
           </span>    </em></div>
      </div>
    
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>
        <h2>H2 level heading </h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
        <div align="center"><span class="style6">2009 AguaFortuna<br/>
          Powered by <strong><u>sheramf</u></strong></span>
        </div>
      </div>
    
    <!-- end #container --></div>
    
    
    <!-- <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?ie=UTF8&amp;msa=0&amp;msid=102911431521762821776.00047517602f2040b5d65&amp;ll=14.634995,121.029789&amp;spn=0.002585,0.004823&amp;output=embed"></iframe><br /><small>View <a href="http://maps.google.com/maps/ms?ie=UTF8&amp;msa=0&amp;msid=102911431521762821776.00047517602f2040b5d65&amp;ll=14.634995,121.029789&amp;spn=0.002585,0.004823&amp;source=embed" style="color:#0000FF;text-align:left">My Saved Places</a> in a larger map</small>
     -->
    
    
    </body>
    </html>
    Attached Files Attached Files

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles