Web Analytics Made Easy -
StatCounter Unaligned CSS - CodingForum

Announcement

Collapse
No announcement yet.

Unaligned CSS

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Unaligned CSS

    Some reason the 3rd box should be side of one box left side of layout. it kept aligned bottom of the layer. so please look at it http://www.deaftucson.com/indextest.php
    and let me know whats going on and what ive need to it to be fixed. i spent 1 hour to trying figure it out so no luck yet so please help me


    indextest.php
    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=ISO-8859-1" />
    <title>DT | Deaftucson.com</title>
    <link href="gobal.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    body {
    	margin: 0px 0px 0px 0px;
    	padding: 0px 0px 0px 0px;
    	/* part 1 of 2 centering hack */
    	}
    #content {
    	width: 905px;
    	margin-top: 20px;
    	margin-bottom: 20px;
    	margin-right: auto;
    	margin-left: auto;
    	/* opera does not like 'margin:20px auto' */
    	/* part 2 of 2 centering hack */
    	width: 905px; /* ie5win fudge begins */
    	voice-family: "\"}\"";
    	voice-family:inherit;
    	width: 905px;
    	float: none;
    	height: 708px;
    	}
    html>body #content {
    	width: 905px; /* ie5win fudge ends */
    	}
    -->
    </style>
    </head>
    
    <body>
    <div id="content">
            <div id="site_container">
    		<!--Start Header Code-->
    
              
               <div id="bod_container">
                 <div class="bod_tb"><img src="images/b_maintop.gif" alt="" width="720" height="8" /></div>
                 <div class="bod_menu" id="menu"><div id="menu_container">
    <div id="but_container">
      <div class="buttons">
      <a href="h.html">Home</a>
      <a href="h.html">Events Calendar</a>
      <a href="h.html">Chatroom</a>
    
      <a href="h.html">Directory</a>
      <a href="h.html">Forums</a>
      <a href="">Contact us</a>  
      </div>
    </div>
    <div class="spacer_horz"></div>
    <div id="newsl_container">
    <div><img src="../images/ls_newletter.gif" alt="" /></div>
    <div class="newsl_info">Enter your name and e-mail address to receive the latest news and calendar events.</div>
    <div class="newsl_form"></div>
    
    </div>
    <div></div>
    </div>
    
    </div>
    	         <div class="bod_main" id="main"><div id="Main_container">
    <div align="left"><img src="../images/dir_head.gif" width="117" height="32" alt="" /></div>
    <div id="dir_container">
    <div class="dir_sides"><img src="../images/dir_left.gif" width="5" height="63" alt="" /></div>
    <div id="dir_fixed">
    <form action="http://www.deaftucson.com/dir/search.php" method="get" enctype="application/x-www-form-urlencoded" name="Directory" target="_self" title="dirsearch">
    <input name="url" type="text" class="dir_textbox" value="Type here to search on something in directory" size=55 />
    <input type="submit" name="Search" value="Search" />
    <br />
    <input name="search_type[]" type="checkbox" id="s1" value="URL" />
    <label for="s1" >By URL</label>
    
    <input name="search_type[]" type="checkbox" id="s2" value="Title" checked="checked" />
    <label for="s2" >By Link Title</label>
    <input name="search_type[]" type="checkbox" id="s3" value="Description" />
    <label for="s3" >By Link Description</label>
    </form>
    </div>
    <div class="dir_sides"><img src="../images/dir_right.gif" width="5" height="63" alt="" /></div>
    </div>
    
    <div class="spacer_horz"></div>
    <div id="news_container"><img src="../images/demo.gif" alt="" width="526" height="201" /></div>
    <div class="spacer_horz"></div>
    <div id="con_container"><a href="cxvxzc" target="_parent" class="linkm2">rvcxvcx</a></div>
    <div id="wea_container">
    
      <embed src="http://netwx.accuweather.com/netWx-v26.swf?lang=eng&zipcode=Tucson, AZ&size=6&theme=3&metric=0" width="435" height="90" name="netWxV6" type="application/x-shockwave-flash" />
      <br />
      <span class="main"><a href="http://wwwa.accuweather.com/adcbin/public/index.asp?partner=netWeather" class="linkm1">Weather Forecasts</a> | <a href="http://wwwa.accuweather.com/maps-satellite.asp?partner=netWeather" class="linkm1">Weather Maps</a> | <a href="http://wwwa.accuweather.com/index-radar.asp?partner=netWeather" class="linkm1">Weather Radar</a></span></div>
    <div id="main_footer"></div></div>
              </div>
    		  <div id="adv_container">
    
                <div class="adv_tb"><img src="images/b_advtop.gif" alt="" width="176" height="8" /></div>
    	        <div class="adv_main" id="menu">dd</div>
              </div>
              
    </div>
    
    </div>
    </body>
    </html>

    gobal.css
    Code:
    #container {
    	margin-right: auto;
    	margin-bottom: 0px;
    	margin-left: auto;
    	width: 904px;
    	padding: 0px;
    	margin-top: 0px;
    	height: auto;
    	float: left;
    }
    
    /* body section */
    
    #site_container {
    	float: left;
    	width: 905px;
    	height: auto;
    }
    #header {
    	background-image: url(images/logo.gif);
    	background-repeat: no-repeat;
    	height: 55px;
    	width: auto;
    	float: left;
    }
    #footer {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	font-style: normal;
    	font-weight: normal;
    	text-align: center;
    	vertical-align: middle;
    	color: #BDBCAE;
    	text-decoration: none;
    	padding-top: 50px;
    	float: none;
    }
    #bod_container {
    	float: left;
    	height: 700px;
    	width: 720px;
    	background-color: #F7F7F6;
    	background-image: url(images/b-mainbottom.gif);
    	background-repeat: no-repeat;
    	background-position: bottom;
    }
    .bod_tb {
    	float: left;
    	width: 720px;
    	height: 8px;
    }
    .bod_menu {
    	width: 170px;
    	float: left;
    	margin-left: 8px;
    	height: 684px;
    	margin-bottom: 8px;
    }
    .bod_main {
    	float: left;
    	width: 526px;
    	margin-left: 8px;
    	margin-right: 8px;
    	height: 684px;
    	margin-bottom: 8px;
    }
    #adv_container {
    	float: left;
    	height: 700px;
    	width: 176px;
    	background-color: #F7F7F6;
    	margin-left: 8px;
    	background-image: url(images/b_advbottom.gif);
    	background-repeat: no-repeat;
    	background-position: bottom;
    	margin-bottom: 8px;
    }
    .adv_main {
    	float: left;
    	width: 160px;
    	height: 684px;
    	margin-right: 8px;
    	margin-left: 8px;
    }
    .adv_tb {
    	float: left;
    	width: 176px;
    }
    a.linkb1 {
    	font-size: 12px;
    	font-family: Arial, Helvetica, sans-serif;
    }
    a:link.linkb1 {
    	color: #2C4A5F;
    	text-decoration: none;
    }
    
    a:visited.linkb1 {
    	text-decoration: none;
    	color: #2C4A5F;
    }
    a:hover.linkb1 {
    	text-decoration: underline;
    	color: #7E7A4D;
    }
    a:active.linkb1 {
    	text-decoration: none;
    	color: #2C4A5F;
    }
    .b_spacer {
    	float: left;
    	height: auto;
    	width: 8px;
    	background-image: url(images/menuspacer.gif);
    	background-repeat: no-repeat;
    }
    /* menu section */
    #menu_container {
    	background-image: url(../images/ls_bottom.gif);
    	background-position: center bottom;
    	height: 684px;
    	width: 170px;
    	background-repeat: no-repeat;
    	background-color: #112330;
    }
    .menu_spacer {
    	background-image: url(../images/menuspacer.gif);
    	background-repeat: repeat-x;
    	height: 1px;
    }
    #but_container {
    	background-image: url(../images/ls_navbox.gif);
    	background-repeat: no-repeat;
    	margin: 0px;
    	padding-top: 5px;
    	padding-right: 0px;
    	padding-bottom: 2px;
    	padding-left: 0px;
    }
    
    .buttons a {
    	color: #FFFFFF;
    	padding-left: 10px;
    	display: block;
    	font-weight: normal;
    	text-decoration: none;
    	text-align: left;
    	font-family: "Trebuchet MS", arial, verdana, sans-serif;
    	font-size: 12px;
    	padding-top: 8px;
    	padding-right: 2px;
    	padding-bottom: 2px;
    	height: 20px;
    	background-image: url(../images/menuspacer.gif);
    	background-repeat: repeat-x;
    	background-position: center bottom;
    }
    
    .buttons a:hover {
    	background-color: #b8b596;
    	color: #102230;
    	text-decoration: none;
    	font-family: "Trebuchet MS", arial, verdana, sans-serif;
    	font-size: 13px;
    	font-weight: bold;
    	margin-right: 2px;
    	margin-left: 2px;
    }
    
    #newsl_container {
    	font-family: "Trebuchet MS", arial, verdana, sans-serif;
    	font-size: 11px;
    	font-weight: normal;
    	color: #FFFFFF;
    	text-decoration: none;
    	float: left;
    	width: 170px;
    	background-color: #112431;
    }
    .newsl_form {
    	font-family: "Trebuchet MS", arial, verdana, sans-serif;
    	font-size: 12px;
    	font-weight: normal;
    	text-decoration: none;
    	padding-top: 0px;
    	padding-right: 9px;
    	padding-bottom: 9px;
    	padding-left: 9px;
    }
    .newsl_textbox {
    	font-family: "Trebuchet MS", arial, verdana, sans-serif;
    	font-size: 11px;
    	font-weight: normal;
    	color: #112330;
    	text-decoration: none;
    	background-color: #f7f7f6;
    	margin: 2px;
    	border: 2px solid #b8b596;
    	padding: 2px;
    }
    
    .newsl_info {
    	color: #b8b596;
    	font-weight: normal;
    	text-decoration: none;
    	text-align: left;
    	font-family: "Trebuchet MS", arial, verdana, sans-serif;
    	font-size: 11px;
    	background-color: #1D394D;
    	border: 1px solid #2D4A5E;
    	padding: 6px;
    	margin: 9px;
    }
    .spacer_horz {
    	width: 170px;
    	padding-top: 6px;
    	padding-bottom: 6px;
    }
    
    
    /* main section */
    #Main_container {
    	width: 526px;
    	height: 684px;
    	background-color: #C7C7BF;
    	background-image: url(../images/b_bkg2.gif);
    	background-repeat: repeat-x;
    }
    #main_footer {
    	background-color: #C7C7BF;
    	background-image: url(../images/main_bottom.gif);
    	background-repeat: no-repeat;
    	background-position: left top;
    	height: 8px;
    	width: 526px;
    }
    /*
     Directory Search Box editor
    */
    #dir_container {
    	float: none;
    	height: 63px;
    	width: 526px;
    	vertical-align: middle;
    	background-color: #AAA576;
    	background-image: url(../images/dir_body.gif);
    	background-repeat: no-repeat;
    	background-position: center center;
    	text-align: center;
    	font-family: "Trebuchet MS", arial, verdana, sans-serif;
    	font-size: 11px;
    	font-weight: normal;
    	color: #2E4855;
    	text-decoration: none;
    }
    .dir_container {
    	float: none;
    	height: 63px;
    	width: 527px;
    	vertical-align: middle;
    	background-color: #AAA576;
    	background-image: url(../images/dir_body.gif);
    	background-repeat: no-repeat;
    	background-position: center center;
    	text-align: center;
    	font-family: "Trebuchet MS", arial, verdana, sans-serif;
    	font-size: 11px;
    	font-weight: normal;
    	color: #2E4855;
    	text-decoration: none;
    }
    .dir_sides {
    	height: 63px;
    	width: 5px;
    	float: left;
    	background-color: #AAA576;
    }
    .dir_textbox {
    	font-family: "Trebuchet MS", arial, verdana, sans-serif;
    	font-size: 12px;
    	font-weight: normal;
    	color: #112330;
    	text-decoration: none;
    	background-color: #f7f7f6;
    	border: 1px solid #2F4956;
    	padding: 2px;
    }
    #dir_fixed {
    	width: 516px;
    	float: left;
    	text-align: center;
    	margin-top: 13px;
    }
    /*
     News editor
    */
    #news_container {
    	text-align: center;
    	vertical-align: middle;
    }
    /*
     Contents editor
    */
    #con_container {
    	padding-top: 0px;
    	font-family: "Trebuchet MS", arial, verdana, sans-serif;
    	font-size: 12px;
    	color: #234157;
    	height: 167px;
    }
    .spacer_horz {
    	padding: 4px;
    }
    
    /*
     Weather editor
    */
    #wea_container {
    	font-family: "Trebuchet MS", arial, verdana, sans-serif;
    	font-size: 12px;
    	color: #000033;
    	text-align: center;
    	vertical-align: middle;
    	margin-top: 35px;
    	margin-right: 25px;
    	margin-bottom: 25px;
    	margin-left: 25px;
    	padding: 15px;
    	background-color: #AEB0A9;
    	background-image: url(../images/weathbkg.jpg);
    	background-repeat: repeat-x;
    	border-top-width: 1px;
    	border-right-width: 1px;
    	border-bottom-width: 1px;
    	border-left-width: 1px;
    	border-top-style: solid;
    	border-right-style: solid;
    	border-bottom-style: solid;
    	border-left-style: solid;
    	border-top-color: #555552;
    	border-right-color: #676662;
    	border-bottom-color: #83837D;
    	border-left-color: #676662;
    }
    a.linkm2 {
    	font-family: "Trebuchet MS", arial, verdana, sans-serif;
    	font-size: 13px;
    	color: #59757E;
    }
    a:visited.linkm2 {
    	font-family: "Trebuchet MS", arial, verdana, sans-serif;
    	font-size: 13px;
    	color: #59757E;
    }
    a:hover.linkm2 {
    	font-family: "Trebuchet MS", arial, verdana, sans-serif;
    	font-size: 13px;
    	color: #AAA576;
    }
    a:active.linkm2 {
    	font-family: "Trebuchet MS", arial, verdana, sans-serif;
    	font-size: 13px;
    	color: #59757E;
    }
    a.linkm1 {
    	font-family: "Trebuchet MS", arial, verdana, sans-serif;
    	font-size: 12px;
    	color: #474744;
    }
    a:visited.linkm1 {
    	font-family: "Trebuchet MS", arial, verdana, sans-serif;
    	font-size: 12px;
    	color: #474744;
    }
    a:hover.linkm1 {
    	font-family: "Trebuchet MS", arial, verdana, sans-serif;
    	font-size: 12px;
    	color: #898A84;
    }
    a:active.linkm1 {
    	font-family: "Trebuchet MS", arial, verdana, sans-serif;
    	font-size: 12px;
    	color: #474744;
    }
    .dir_align {
    	font-family: "Trebuchet MS", arial, verdana, sans-serif;
    	font-size: 12px;
    	color: #2E4855;
    	text-decoration: none;
    	font-weight: normal;
    	text-align: center;
    	vertical-align: bottom;
    	margin-top: 12px;
    }
    
    /* adv section */
    Last edited by Level5; Oct 12, 2006, 03:56 PM. Reason: paste the codes

  • #2
    It's because it's in #bod_container which isn't wide enough for it to be beside the other columns.

    I used Firefox's DOM Inspector to debug your code.

    I recommend you read this:
    Tips on Debugging Layouts

    and these:
    No more Transitional DOCTYPEs, please
    It's Time To Kill Off Transitional DOCTYPES
    Transitional vs. Strict Markup
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

    Comment

    Working...
    X