PDA

View Full Version : little help with layout



mackieinva
27 Jan 2008, 06:25 PM
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.


<!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>

Wickham
28 Jan 2008, 02:55 AM
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.