Hello.

I can't seem to get my columns right on this page: http://mattelmore.org/links_esl_resources.php

Could somebody please explain to me the basic concept of sorting the code so that I actually get two columns. No matter how I switch up the order, they get all jumbled up on me.

Also, they look different in Firefox and IE.

Thanks in advance.

Hi

Add this to your css

#col1 {
float:left;}
#col2 {float:right}

Remove this

.float1 {float:left;}
.float2 {float:right;}

Then change your html to this

<div id="main">
    <div id="content">
<div id="col1">
      <div class="float1 column">
        <h3>Online Excercises </h3>
        <ul>
<li><a href="http://www.britishcouncil.org/learnenglish-central-test-test-your-level.htm">British Council Level Test</a></li>
<li><a href="http://owl.english.purdue.edu/owl/resource/678/01/">Owl English at Purdue </a></li>
<li><a href="http://a4esl.org/q/h/grammar.html">Grammar Practice Tests </a></li>
<li><a href="http://www.nonstopenglish.com/allexercises/upper_intermediate.asp">Non-Stop English </a> </li>
<li><a href="http://www.wordpower.ws/">Word Power </a> </li>
<li><a href="http://a4esl.org/">A4ESL</a></li>
<li><a href="http://www.english-test.net/">English Test .net </a></li>
<li><a href="http://assoc.pagespro-orange.fr/une.education.pour.demain/rodsex/rodsindex.htm">Une Education</a></li>
<li><a href="http://a4esl.org/q/h/grammar.html"></a></li>
        </ul>
      </div>









<div class="float1 column">
        <h3>Listening </h3>
        <ul>
<li><a href="http://www.esl-lab.com/">Randall's Listening Lab </a></li>
<li><a href="http://esl.about.com/od/englishlistening/English_Listening_Skills_and_ActivitiesEffective_Listening_Practice.htm">Listening Skills from About.com </a></li>
<li><a href="http://a4esl.org/q/h/grammar.html">Grammar Practice Tests </a></li>
<li><a href="http://a4esl.org/q/f/">Quizzes</a></li>
<li><a href="http://teacherjoe.us/Jokes.html">Teacher Joe Jokes </a></li>
<li><a href="http://www.ohiou.edu/linguistics/esl/listening/index.html">Ohio University ESL Listening Links</a></li>
<li><a href="http://www.thislife.org/">This American Life</a></li>
<li><a href="http://www.npr.org/">NPR: National Public Radio</a></li>
<li><a href="http://www.bbc.co.uk/radio/">BBC Radio</a></li>
        </ul>
      </div>
    
<div class="float1 column">
      </div>
      
<div class="float1 column">
        <h3>Pronunciation</h3>
        <ul>
<li><a href="http://international.ouc.bc.ca/pronunciation/">Can8 Virtual Lab </a></li>
<li><a href="http://www.5minuteenglish.com/pronunciation.htm">5 Minute English </a></li>
        </ul>
      </div></div>
<div id="col2">
<div class="float2 column">
        <h3>Reading</h3>
        <ul>
<li><a href="http://www.englishclub.com/reading/index.htm">English Club </a></li>
<li><a href="http://iteslj.org/links/ESL/Reading/">TESL Journal Reading Links </a></li>
<li><a href="http://www.searchlit.org/">SearchLit</a></li>
<li><a href="http://dir.yahoo.com/News_and_Media/Web_Directories/Most_Emailed_Stories/">Most E-Mailed Yahoo Articles</a></li>
<li><a href="http://www.nytimes.com/gst/mostemailed.html">Most E-Mailed NY Times Articles</a></li>
        </ul>
      </div>

<div class="float2 column">
        <h3>Various ESL Student Resources</h3>
        <ul>
<li><a href="http://www.eslall.com/learn_english.html">ESL All </a></li>
<li><a href="http://www.eoioviedo.org/trabajos/crosswords%20eclipse/index.htm">ESL Crossword Puzzles</a></li>
<li><a href="http://www.ohiou.edu/linguistics/esl/">Ohio University ESL Resources</a></li>
        </ul>
      </div>

<div class="float2 column">
  <h3>Teachers' Resources </h3>
  <ul>
<li><a href="http://www.esltower.com/index.html">ESL Tower </a> </li>
<li><a href="http://www.usingenglish.com/handouts/">Using English  </a></li>
<li><a href="http://www.english-zone.com/teach/1minilssn.html#verbs">English Zone</a></li>
<li><a href="http://www.eoioviedo.org/trabajos/crosswords%20eclipse/index.htm">ESL Crossword Puzzles</a></li>
<li><a href="http://www.eslbase.com/">ESL Base</a></li>
</ul>
</div></div>

       
    </div>

This should even things up a bit

I don't think that helps tbh.

You obviously need floats for this, I haven't looked at your css but I'm guessing its acting in the way you describe due to no width attribute being set.

.float1 {
    float:left;
     width: 200px;
}

.float2 {
    float:right;
    width:200px;
}

200px should be changed in accordance to your preferences.

Gilligan is correct, if you're going to use floats, you MUST define a width, especially with a columnar layout.

IE6 is going to botch the columns because you are triggering the doubled-float margin bug by applying a margin going in the same direction as the float, ie: float:left and a left margin - IE will DOUBLE that left margin.

Read about it here: http://www.positioniseverything.net/...ed-margin.html

That looks like it worked. I changed it to 200 px, like you said, even though the code is all in ems.

We'll see if it lasts as I add more content. I appreciate the help!

Thanks for explaining the IE thing, Ladyn. But it looks okay --for now-- in IE. I'll jut let that sleeping dog lie for the moment.

WhOOPs.

The change worked for the columns. But now a photo has stretched itself sideways.

Check it out: http://mattelmore.org/esl.php

What do I need to tweak to make that right?

you'll have to change the width on the float2 class to the width of the photo.
If it has to be 200px, then you'll have to put the image inside a div

Well, since the columns on the links page are looking okay now, I'd hate to go changing the width. I tried putting the image inside a div by adding <div>, </div> before and after. Naive, now I know. No visible changes to the image.

So, I guess I have to define a new div class? I'm not sure how to do that without messing everything else up. Here's the styling code:

body {background:#040474 url(../images/midnite_gradient.gif) repeat;}

#wrapper {width:800px;
margin: 0 auto;
background:#fff url(../images/paisley_link_banner.png) repeat-y right;
border:1px solid #7b7ba5;
}

#pagetitle {padding:1em;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-weight: bold;
}

#header{height:90px;
background: #c5ccae url(../images/header.png) no-repeat left;
font-size:200%;
border:solid #00297f;
border-width: 2px 0 4px 0;
}

/* This section styles and positions the clickable logo */
#header h1 {margin: 0.7em 3em;
text-align:right;
}

/* Header Link Properties */
#header h1 a {font-weight: bold;
text-decoration:none;
color: #FF6600;
}

#header h1 a:hover {font-weight: bold;
color: #0033FF;
}

#main {height:100%;
}

#content {margin:2em 2em 0 2em;
padding: 1% 2%;
width: 510px;
min-height:350px;
float:left;
background:#c5ccae url(../images/paper_texture.jpg);
color:#000;
border: 3px solid #7b7ba5;
}

/* Content Text Properties */
#content h2 {font-size:130%;
}

#content p {
margin: 1em 0;
line-height:1.5em;
font-size: 90%;
}
/* Main Content Links */
#content a {color:#990000;
font-weight:bold;
text-decoration:none;
}

#content a:hover {color:#666;
}

/* Links list */
#content .column {margin:1em 0.5em;
width:20em;
font-size:73%;
}

#content .column ul {list-style-type:none;
}

#content .column li {margin:0.5em 0;
}

/* Contact Details List */
#content dl {text-align:center;
}

#content dt {margin:1em 0 0.2em 0;
font-weight:bold;
}

#content dd {margin:0 0 1em 0;
}

#sidebar {margin:1em 2em 2em 78%;
}

#sidebar ul{padding:2em 0;
list-style-type:none;
text-align:center;
}

#sidebar a {font-size:135%;
line-height: 200%;
color:#FFCC33;
text-decoration:none;
font-weight:bold;
font-size:110%;
}

#sidebar a:hover {colorrange;
}

#footer {clear:both;
padding:1em;
text-align:center;
}

#footer img {border:none;}

Okay, well, I changed the float2 width to 100px and that worked. But oddly enough, it didn't change the columns in the links page. So, everything appears to be copacetic. Thanks.

It might be because the class "column" also has a width being set.

But by the looks of it, you can just change this in your links page

<div class="float1 column">

into

<div class="float1">

and maybe change the margins according to how it was set in "column"

Alternatively you could remove the 'width' attribute from "column"