Results 1 to 2 of 2

Thread: little help with layout

  1. #1
    Join Date
    Dec 2007
    Posts
    7

    little help with layout

    Hi everyone, so I started working on a site and I'm having a little trouble with two of the containers.

    this is the basic layout of it:

    http://img.photobucket.com/albums/v3...dex-layout.gif

    This is how it looks right now:

    http://practice-space.110mb.com


    Can anyone tell me what I'm doing wrong with the Content and Links containers. I would like them to be side by side. Thank you for any help, here's the code if you want to skim through it.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <head>
    <title>Phi Theta Kappa - ECPI College of Technology</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    body {
    	background:url(blue-bg.gif);
    }
    
    .head {
    	margin:0 auto;
    	position:relative;
    	padding:5px;
    }	
    
    .content {
    	margin:0 auto;
    	position:relative;
    	padding:5px;
    	background:#FFFFFF;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size:10px;
    	text-indent:10px;
    	}
    	
    .content-head{
    	background-color:#005ab5;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size:18px;
    	color:white;
    	text-align:center;
    	margin:0 auto;
    	padding:0 auto;
    }
    	
    .li-ri {
    	margin-top:10px;
    	margin-bottom:10px;
    	margin:0 auto;
    	padding:5px;
    	}
    
    #container {
    	margin-top:25px;
    	margin-bottom:25px;
        width:920px;
    	margin:0 auto;
    	position:relative;
        background:url(main-cont.gif);
    	border:outset;
    	border-color:#005ab5;
    	}
    
    #header{
    	top:25px;
    	width:770px;
    	height:160px;
    	margin:0 auto;
    	position:relative;
    	background:url(head-cont.gif);
    	border:outset;
    	border-color:#005ab5;
    	}
    	
    #content {
    	margin-top:50px;
    	margin-left:10px;
    	margin-bottom:50px;
    	width:650px;
    	background:#FFFFFF;
    	border:outset;
    	position:relative;
    	border-color:#005ab5;
    	}
    	
    #link-right {
    	width:210px;
    	background:url(head-cont.gif);
    	border:outset;
    	position:relative;
    	border-color:#005ab5;
    	}
    </style>
    
    </head>
    <body>
    
    <div id="container">
    	<div id="header">
    	  <p class="head"><img src="Header2.gif"></p>
    
      	</div>
    		<div id="content">
    		<p class="content-head">Welcome to PTK at ECPI College of Technology!</p>
    		<em><p class="content">"The purpose of Phi Theta Kappa shall be to
    		recognize and encourage scholarship among two-year college students. To achieve
    		this purpose, Phi Theta Kappa shall provide opportunity for the development of
    		leadership and service, for an intellectual climate for exchange of ideas and
    		ideals, for lively fellowship for scholars, and for stimulation of interest in
    		continuing academic excellence."</p>
    
    		<p class="content">Phi Theta Kappa's mission is two-fold: 1) recognize
    		and encourage the academic achievement of two-year college students and (2)
    		provide opportunities for individual growth and development through
    		participation in honors, leadership, service and fellowship programming.</p></em>
    
    		<p class="content"><img src="key.gif" align="left" border="0" width="61" height="88">Phi Theta Kappa traces its beginnings to a Society
    		that originated with six charter members under the name of Kappa Phi Omicron at
    		Stephens College in Columbia, Missouri, in 1910. The Society continued to grow
    		and in the spring of 1918 was one of many honorary groups in Missouri. At a
    		meeting of the presidents of the Missouri junior colleges for women in 1918, it
    		was decided to organize a new honorary society, chapters of which would have a
    		common character, stand, and similarity of organization. The name Phi Theta
    		Kappa was chosen, and the Society was incorporated in Missouri as a national
    		organization. Founders modeled many aspects of the new Society after the
    		prestigious senior college honorary society, Phi Beta Kappa.</p>
    
    		<p class="content">The eight charter colleges of Phi Theta Kappa were
    		Hardin, Stephens, Christian, Lindenwood, Cottey, Howard Payne, William Woods,
    		and Central. The alpha chapter was established at Hardin College, but was later
    		moved to Stephens College when Hardin College became a baccalaureate granting
    		institution. Today, Cottey College, Nevada, Missouri, is the only charter
    		college with an active Phi Theta Kappa chapter.</p>
    
    		<p class="content">For the first six years, Phi Theta Kappa confined
    		its activity to women's junior colleges, but in 1924 through constitutional
    		amendment, the field of activity was enlarged to cover all junior colleges. In
    		1926, Phi Theta Kappa expanded beyond the borders of Missouri and into
    		coeducational institutions. The American Association of Community Colleges
    		recognized Phi Theta Kappa as the <em>official</em> honor society for two-year
    		colleges in 1929.</p>
    
    		<p class="content">In 1930, Margaret James (Mosal) became the first
    		elected national president of Phi Theta Kappa while attending Whitworth College
    		in Brookhaven, Mississippi. She became national secretary in 1935 and moved the
    		records of the organization to her hometown of Canton. Mosal served as Phi
    		Theta Kappa's chief executive for fifty years, retiring as executive director
    		in 1985.</p>
    
    		<p class="content">In the early years, Phi Theta Kappa membership was
    		conferred to students at time of graduation and few programs and services were
    		offered. The explosive growth of community colleges in the 1960s led Phi Theta
    		Kappa to expand its mission to reflect the nurturing philosophy of the
    		institutions it served. Students were inducted as freshmen and study programs
    		were offered.</p>
    
    		</div>
    			<div id="link-right">
    			<p class="li-ri"><center><img src="home-link.gif"></center><hr>
    			<center><img src="wj-link.gif"></center><hr>
    			<center><img src="mem-link.gif"></center><hr>
    			<center><img src="admin-link.gif"></center></p>
    			</div>
    		<p class="content-head">©Beta Epsilon Theta and ECPI College of Technology
    </div>
    
    </body>

  2. #2
    Join Date
    Feb 2006
    Location
    Salisbury UK
    Posts
    4,332
    The two divs are side by side as I look at them in IE7 and Firefox.

    You have #container width: 918px.

    I added an outset border width of 4px below to test:-

    #content {
    width:650px;
    margin-left:10px;
    background:#FFFFFF;
    border:4px outset;
    border-color:#005ab5;
    }
    #link-right {
    width:210px;
    background:url(head-cont.gif);
    border:4px outset;
    border-color:#005ab5;
    }
    #content, #link-right {
    margin-top:20px;
    margin-right: 10px;
    float:left;
    margin-bottom:10px;
    }

    So #content is 650 + margin-left 10 + margin-right 10 plus outset borders if say 2*4px = 678px.

    #link-right is 210 + margin-left 10 plus outset borders if say 2*4px = 228px.

    Total 906px which is OK in my test but how wide are the outset borders? I'm not sure what the default width is for outset borders. It's better to state a width. With 3px borders I can see the outset in Firefox but not in IE7. 4px shows a definite outset border in both browsers. 7px borders makes the total 918px which is still OK and 8px makes the total 922px and the #link-right div goes down below #content.
    Code downloaded to my PC will be deleted in due course.
    WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
    Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.

Posting Permissions

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