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
    New Coder
    Join Date
    Sep 2007
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Layout problem. Div stretching more than it should.

    Hi guys,

    Can you take a look at my css and html below and see if you can tell why my content div is stretching more than the defined 524px set in the css.

    HTML:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>AFCEA - West 2008</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <LINK REL=stylesheet HREF="style.css" TYPE="text/css">
    <script language="JavaScript" type="text/javascript">
    <!-- 
    
    function validate(form)
    {
    	if(form.cvipcode.value == "")
    	{
    		alert("Please enter a VIP number.");
    		form.cvipcode.focus();
    		return(false);
    	}
    	else
    	{
    		return(true);
    	}
    }
    
    -->
    </script>
    </head>
    <body>
    <!--************** 1 HEADER  *****************-->
    <table border="0" width="100%" cellpadding="0" cellspacing="0" ID="Table1">
    <tr><td bgcolor="#e9d666"><center><img src="https://www.afcea.org/events/west/2008/images/west2008.jpg" alt="West 2008" width="675" height="144" border="0">
    
    </center></td></tr>
    <tr><td bgcolor="#ffffff"><img src="https://www.afcea.org/events/west/2008/images/1x1.gif" alt="" width="1" height="2" border="0"></td></tr>
    <tr><td bgcolor="#ffffff"><img src="https://www.afcea.org/events/west/2008/images/1x1.gif" alt="" width="1" height="2" border="0"></td></tr>
    </table>
    <!--*****************  /1 HEADER  ******************-->
    
    
    
    
    
    
    
    
    
    
    
    
    <div id="mainbody">
    <!--*************  2 MAIN BODY  ****************-->
    <table border="0" bgcolor="#ffffff" cellpadding="0" cellspacing="0" ID="Table2">
    <tr valign="top">
    
    <!-------  2.1 NAV  ------->
    <td class="navcontainer" bgcolor="#e0cf6c"><img src="https://www.afcea.org/events/west/2008/images/nav-top.gif" alt="nav top" width="149" height="5" border="0"><BR>
    <script language="JavaScript" src="https://www.afcea.org/events/west/2008/includes/tmenu_data_external.js"></script></td>
    <!-------  /2.1 end nav  ------->
    
    <!-------  2.2 CONTENT  ------->
    <td>
    <div id="content">
    
    <h1>Registration</h1>
    
    	
    	<!--******Main Body Table******-->
    	<table border="0" ID="Table4" width="100%">
    		<tr>
    			<td><hr width="100%"></td>
    		</tr>
    		
    	</table>
    	
    </div>	
    </td>
    </tr>
    <!-------  /2.2 end content  ------->
    
    <!-------  2.3 FOOTER  ------->
    
    <tr><td bgcolor="#ffffff" colspan="2"><img src="https://www.afcea.org/events/west/2008/images/1x1.gif" alt="" width="1" height="1" border="0"></td></tr>
    <tr><td bgcolor="#000000" colspan="2"><img src="https://www.afcea.org/events/west/2008/images/1x1.gif" alt="" width="1" height="5" border="0"></td></tr>
    <tr><td bgcolor="#ffffff" colspan="2"><img src="https://www.afcea.org/events/west/2008/images/1x1.gif" alt="" width="1" height="1" border="0"></td></tr>
    
    <tr>
    <td bgcolor="#8460a8" colspan="2">
    	<div class="style1" id="footer">
          
    Information:
    <a href="https://www.afcea.org/events/west/2008/introduction.asp">Introduction</a> | <a href="https://www.afcea.org/events/west/2008/generalinfo.asp">General Information</a> | <a href="https://www.afcea.org/events/west/2008/faqs.asp">FAQs</a> | <a href="https://www.afcea.org/events/west/2008/hotel.asp">Hotel &amp; Travel</a>
    
    <BR>
    <a href="https://www.afcea.org/events/west/2008/schedule.asp"><b>SCHEDULE</b></a>
    <BR>
    Events: 
    <a href="https://www.afcea.org/events/west/2008/speakers.asp">Speakers &amp; Panels</a> | <a href="https://www.afcea.org/events/west/2008/doncio.asp">DoN CIO Sessions</a> | <a href="https://www.afcea.org/events/west/2008/pdc.asp">Professional Development</a> | <a href="https://www.afcea.org/events/west/2008/special.asp">Special Events</a> | <a href="https://www.afcea.org/events/west/2008/tickets.asp">Tickets</a>
    
    <BR>
    Exposition: 
    <a href="https://www.afcea.org/events/west/2008/">Exhibit List</a> | <a href="https://www.afcea.org/events/west/2008/">Floorplan</a> | <a href="https://www.afcea.org/events/west/2008/howto.asp">How To Exhibit</a> | <a href="https://www.afcea.org/events/west/2008/https://expo.jspargo.com/west08/erc.htm">Exhibitor Resource Center</a>
    <BR>
    <a href="https://www.afcea.org/events/west/2008/"><b>JOB FAIR</b> </a> 
    
    <BR>
    Corporate Opportunities:  
    <a href="https://www.afcea.org/events/west/2008/patrons.asp">Patrons & Sponsors</a> | <a href="https://www.afcea.org/events/west/2008/corporatetables.asp">Corporate Tables</a> | <a href="https://www.afcea.org/events/west/2008/advertising.asp">Advertising</a>
    <BR>
    Golf Tournament: 
    <a href="https://www.afcea.org/events/west/2008/players.asp">Players</a> | <a href="https://www.afcea.org/events/west/2008/sponsors.asp">Sponsors</a>
    
    <BR>
    Register Now!: 
    <a href="https://reg.jspargo.com/west08/reg/">Attendee Registration</a> | <a href="https://reg.jspargo.com/west08/reg/">Exhibitor Registration</a> | <a href="https://www.afcea.org/events/west/2008/mediareg.asp">Media Registration</a>
          </div></td>
    </tr>
    
    <!-------  /2.3 footer  ------->
    </table>
    <!---------------  /2 MAIN BODY  --------------->
    
    </div>
    
    
    
    <!--================================================================================================================
    
         source Code - (Do Not Alter!)
         The source script block below should appear directly before your documents closing </BODY> tag.-->
    
    <script language="JavaScript" src="https://www.afcea.org/events/west/2008/includes/tmenu_code.js"></script>
    
    <!--==============================================================================================================-->
    
    
    </body>
    </html>

    CSS:
    Code:
    body {
    	background: #6f6f6f url(/events/west/2008/images/bg-gray.jpg);
    	margin: 0px;
    	text-align: center;
    }
    
    
    #mainbody 
    {
    	width: 673px;
    	border-left: 1px solid #fff;
    	border-right: 1px solid #fff;
    	border-bottom: 1px solid #fff;
    	margin-left: auto;
    	margin-right: auto;
    	text-align: left;
    }
    
    table {text-align: left;}
    
    .navcontainer {
    	background: #E0CF6C;
    	width: 149px;
    }
    
    #navcontainer a.green, a.green:link, a.green:active, a.green:visited {color:#fff; text-decoration:none; }
    #navcontainer a:hover, a:hover:visited {color: #6f6f6f; text-decoration: underline;}
    
    #content 
    {
    	width: 524px;
    	background: #fff;
    	padding: 25px;
    	font-family: Arial, Tahoma, Helvetica, Verdana, sans-serif;
    	font-size: 12px;
    	color: #000;
    	text-align: center;
    }
    
    #content a, a:link, a:active {color: #0a86ca; text-decoration: underline;}
    #content a:hover, a:hover:visited {color: #f20023; text-decoration: none;}
    #content a:visited {color: #888; text-decoration: underline;}
    
    #content h1 {
    	color: #0d2b88;
    	font-weight: bold;
    	font-size: 24px;
    	padding: 0 0 10px 0px;
    	margin: 0px;
    	text-align: left;
    }
    
    #content h2 {
    	color: #000;
    	font-weight: bold;
    	font-size: 14px;
    	padding-top: 7px;
    	text-align: left;
    }
    
    #footer 
    {
    	margin: 10px 5px 10px 150px;
    	font-family: Arial, Tahoma, helvetica, Verdana, Sans-Serif;
    	font-size: 9px; 
    	color: #c2cae1; 
    	font-weight: bold;
    	text-transform: uppercase;
    	width: 100%;
    }
    #footer a:link, a:link:hover, a:visited {color:#9eaacf; text-decoration: none; font-weight: normal;text-transform: none;}
    #footer a:hover, a:active {color:#fff; text-decoration: underline; font-weight: normal;text-transform: none;}
    
    .style1 {color: #000000}
    .style2 {
    	color: #c2cae1;
    	font-weight: bold;
    }
    #content td {
    	font-family: Arial, Tahoma, Helvetica, Verdana, sans-serif;
    	font-size: 12px;
    	color: #000;
    }
    .red10b {
    	font-family: Arial, Tahoma, Helvetica, Verdana, sans-serif;
    	font-weight: bold;
    	font-size: 12px;
    	color: #ee3333;
    }
    .datetext
    {
    	font-weight: bold;
    	font-size: 12px;
    	color: #394a73;
    	font-family: Arial, Tahoma, Helvetica, Verdana, sans-serif;;
    }
    .subheader9b
    {
        FONT-WEIGHT: bold;
        FONT-SIZE: 12px;
        COLOR: white;
        FONT-FAMILY: Arial, Tahoma, Helvetica, Verdana, sans-serif;
        BACKGROUND-COLOR: #ffce00
    }
    Sorry for the use of tables and horrible formatting. I got handed this site at work and dont really want to rebuild it if I don't have to.

    Thanks!

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Paddings and borders are adding to the width of the element. Remove the padding or decrease the element size accordingly (in your case by 50px to compensate for left and right padding).

    Also this:
    Code:
    #content a, a:link, a:active {color: #0a86ca; text-decoration: underline;}
    #content a:hover, a:hover:visited {color: #f20023; text-decoration: none;}
    #content a:visited {color: #888; text-decoration: underline;}
    Has to be sorted like this:
    Code:
    #content a, a:link, a:active {color: #0a86ca; text-decoration: underline;}
    #content a:visited {color: #888; text-decoration: underline;}
    #content a:hover, a:hover:visited {color: #f20023; text-decoration: none;}
    The general sort order is link, visited, hover, active.


  •  

    Posting Permissions

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