Is there a way to make the content of this page into 2 columns but without using tables?

http://greenvillecopts.org/resources.html

Would it be with relative position in CSS?

Or would tables be better in this case?

Easily possible in CSS...

I would have a container div, with the margins set to 120px. (or fixed width and margins set to auto if you prefer, but personally I'd go for the fluid approach)
Inside that, a header DIV with width set at 100%
Under that, another DIV for the links
Then have a DIV for the menu system with a fixed width. Float the DIV to the left, then put a main content DIV with it's left margin set to be the same as the width of the menu system DIV.

He's already got the page laid out.

I would add 2 divs inside #content... one floated left with 1/2 the width, then add a div for the right side that just has a left margin wide enough to push it over next to the left-side div.

Remember to clear your floats after the close of the 2nd column.

Ok, I almost got it.

In ff, it looks great, however it does not look so good in IE.

Also, the only way the page going down far enough is because I added "height = 500px". At first I didn't have that line and thought the body would extend automatically since the margin for the container is set to auto. Can someone explain that to me? Thanks


CSS

/* Resources 2 colums*/

#col1 {
    float: left;
    width: 200px;
    height: 500px;
    margin-left: 100px;
}
#col2 {
    margin-left: 405px;
    width: 200px;
    height: 500px;
   clear:right;
}

HTML

<div id="content">

<div id="col1">
<div id="titles">
<b>Hymns and Multimedia</b></div>
<ul>
<li><a href="http://tasbeha.org/mp3.html">Tasbeha.org </a>
<li><a href="http://www.coptichymns.net/">Coptic Hymns </a>
<li><a href="http://www.davidensemble.com/english/coptichymns.htm">David Ensemble </a>
<li><a href="http://www.copticheritage.org/Productions.phtml">Coptic Heritage.org </a>
<li><a href="http://www.suscopts.org/deacons/hymns/hymns.html">Church Hymns </a>
</ul>

<div id="titles">
<b>Other Coptic Sites</b></div>
<ul>
<li><a href="http://www.agape-bookstore.com/">Agape Bookstore</a>
<li> <a href="http://www.aghapy.tv/">Aghapy Satellite TV</a>  
<li> <a href="http://www.agpeya.org/">Agpeya.org</a>
<li> <a href="http://www.coepa.org/">COePA</a>
<li> <a href="http://www.copticartstudio.com/">Coptic Art Studio</a>
<li> <a href="http://www.copticmail.com/">Coptic Mail</a>
<li> <a href="http://www.geocities.com/copticnumbertranslator/">Coptic Number Translator</a>
<li> <a href="https://www.orthodoxbookstore.com/">Orthodox Bookstore</a>
<li> <a href="http://www.copticoasis.com/">Coptic Oasis </a>
<li> <a href="http://www.copticchurch.net/">Coptic Orthodox Church Network</a>
<li> <a href="http://www.copticorthodoxliterature.com/">Coptic Orthodox Literature</a>
<li> <a href="http://www.adelnassief.net/">Iconographer Adel Nassief</a>
<li> <a href="http://www.youthbishopric.com/">Offical site of the Youth Bishopric</a>
<li> <a href="http://www.zeitun-eg.org/">Our Lady of Zeitun Online</a>
</ul>

</div>

<div id="col2">

<div id="titles">
<b>Magazines and Newspaper</b></div>
<ul>
<li><a href="http://www.copticpope.org/modules.php?name=Sections&op=viewarticle&artid=62">El-Keraza</a></li>
<li> <a href="http://www.wataninet.com/">Watani</a> </li>
</ul>

<div id="titles">
<b>Other Dioceses and Churches</b></div>
<ul>
<div id="titles">
<b>USA</b></div>
 <li>   <a href="http://www.suscopts.org/">Diocese of the Southern United States</a></li>

  <li>  <a href="http://www.stgeorgechurch.org/"> St. George San Jose, CA </a></li>
  <li>  <a href="http://www.copticamerica.org/">St. Mary & St. George Tallahassee, FL</a></li>
  <li>  <a href="http://www.stmarkchicago.org/">St. Mark Chicago, IL</a> </li>
  <li>  <a href="http://www.stmarkcoccleveland.org/">St. Mark Cleveland, OH</a></li>
  <li>  <a href="http://www.stmarkdc.org/">St. Mark, Washington D.C.</a></li>
  <li>  <a href="http://www.saint-mary.net/">St. Mary East Brunswick, NJ</a></li>
<br>
<div id="titles">
<b>Canada</b></div>
  <li>  <a href="http://www.stmark.toronto.on.coptorthodox.ca/">St. Mark, Toronto</a></li>
  <li>  <a href="http://www.stgeorgestjoseph.ca/">St. George & St. Joseph, Montreal</a></li>
</ul>
</div>

</div>

You're doing good. You just have to remember to clear your floats properly and the page should 'stretch' vertically w/o the height rule in FF. In IE you'll have to give it a height which IE interprets as a 'minimum' height.

I changed your CSS as follows:

#col1 {
float: left;
width: 200px;
height: 500px;
margin-left: 100px;
margin-top: 20px;
margin-bottom: 10px;
display: inline;
}
#col2 {
margin-left: 405px;
width: 200px;
margin-top: 20px;
margin-bottom: 10px;
height: 500px;

}

.brclear { /* Use a break with this class to clear float containers on both sides */
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}

The 'display: inline' is necessary on Col1 to stop the IE double-float margin bug.

I also put a 'position: relative' on your #container.

The clearing <br> goes here:

<div id="titles"><b>Canada</b></div>
<li> <a href="http://www.stmark.toronto.on.coptorthodox.ca/">St. Mark, Toronto</a></li>
<li> <a href="http://www.stgeorgestjoseph.ca/">St. George &amp; St. Joseph, Montreal</a></li>
</ul>
</div><!-- end col2 -->
<br class="brclear">
</div>

Oh ok, that makes sense. But i am little shaky on one thing still --> The br clear, i think i understand what it does but not on my site. If i take it off, nothing changes for me, but in theory, it's suppose to effect my content if I had more columns or more content to both sides of the columns we were trying to align, correct?

That's really the only thing left that's confusing me.

Also, is there a way to make column 2 start at the same height as column one in FF? It's correct in IE for once lol

If you're going to use floats, you have to clear them. You might want to go thru this Float tutorial: http://css.maxdesign.com.au/floatutorial/

And here's a bit more on Floats: http://www.communitymx.com/abstract.cfm?cid=AC008
http://www.communitymx.com/abstract.cfm?cid=47F29

And just in case, here's 1 more: http://css-discuss.incutio.com/?page=ClearingSpace

On that one page, the clear doesn't make that much difference, there's not much else on the page.

The 2 columns SHOULD be at the same top position on the page. Ok.. so do this instead:
#content{
margin-top: 10px;
}

Once you do that, the 2 inside columns line up in FF. I hadn't noticed it because when I'm debugging boxes, I give them 1px borders so I can see what's going where, etc. I had a 1px border on #content and the 2 inside columns lined up, untill I took that out and posted it here.


I just noticed you have some other glitches on that page. You've got <div id="titles"> repeated, can't do that, ID's must be unique. Change #titles to .titles and change your html to <div class="titles">.
You're also missing a couple of <ul>'s.

Thanks Lady.

Still got a few questions if you don't mind :shruggs:

As far as the <div id=titles> I am a little lost. I understand that each ID is unique. I see my mistake in needing to make it as class not ID in the html, but why do I have to changes it to .titles in the CSS style sheat instead of #titles?

Also, when you say i'm missing couple of ul's. You mean between the USA and Cananda? If so, I did that on purpose to make it a big list or is that wrong?

I went ahead and changed the margin to
#content{
margin-top: 10px;
}

Thanks again