www.webdeveloper.com
Results 1 to 8 of 8

Thread: how do i align two containers?

  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

  2. #2
    Join Date
    Sep 2009
    Location
    Toronto, Ontario, Canada
    Posts
    163
    Quote Originally Posted by sher_amf View Post
    here is the code
    when i open this file in firefox the alignment of the 2 containers are not the same

    What alignment are you talking about?

    If you mean their height, they are different because they have differing content.

    i have attached the file just change the ".txt" into html and open it in firefox

    A URL would have been preferable.
    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">

    Why are you using XHTML? If you serve it as XHTML, IE cannot display it; if you serve it as HTML, you have gained nothing by using XHTML.

    And why transitional? What are you transitioning from?

    The styling is ancient and bloated. For such a simple layout, use simple CSS.

  3. #3
    Join Date
    Jan 2008
    Posts
    106
    i have no idea what you are saying..

    it is just a template and i just added the content and the css menu tab

    but how come when i open it in IE it is automatically aligned?...

  4. #4
    Join Date
    Sep 2009
    Location
    Toronto, Ontario, Canada
    Posts
    163
    In what way are they aligned in IE that they aren't in Forefox?

    The usual reason for something to be different in IE is that IE doesn't render it according to the standards.

  5. #5
    Join Date
    Jan 2008
    Posts
    106
    the height...

    i tried aligning them by inserting new line... but they won't exactly align...

  6. #6
    Join Date
    Sep 2009
    Location
    Toronto, Ontario, Canada
    Posts
    163
    This is how that page looks in my browser:
    http://cfaj.freeshell.org/testing/aqua.jpg

    You are using a template that is not intended to do what you want.

    It also has 11 XHTML errors.
    Last edited by cfajohnson; 10-04-2009 at 07:53 PM.

  7. #7
    Join Date
    Jan 2008
    Posts
    106
    yeap that is exactly the problem?

    not using the right template? why is that so?
    so what template should i use?

  8. #8
    Join Date
    Sep 2009
    Location
    Toronto, Ontario, Canada
    Posts
    163
    Quote Originally Posted by sher_amf View Post
    yeap that is exactly the problem?

    not using the right template? why is that so?

    Because you chose the wrong template. Who knows why you did?

    so what template should i use?

    That really doesn't need a template.

    Here's a quick adjustment to the HTML/CSS you posted;

    http://cfaj.freeshell.org/testing/q.html
    Last edited by cfajohnson; 10-04-2009 at 08:39 PM.

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