• Registered: 2009-10-31
  • Posts: 34

Topic: two columns to line up correctly

I can't get this to line up correctly:
look at the source code here:

http://www.ohka.org/gallery-journal.html

One side is the article and the other is the author.  The column on the right does not line up because I have to expand the width to fit.

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: 2008-12-19
  • Posts: 2,343

Re: two columns to line up correctly

Your <ul> within the #col1 has a top margin applied to it. If you reset that using CSS, they will line up correctly.

#col1 ul.idTabs1 { margin-top:0; }

  • Registered: 2009-10-31
  • Posts: 34

Re: two columns to line up correctly

this did not work.  in the <ul> within #col1, did not specify top margin

  • Gender: Female
  • From: San Antonio, TX
  • Registered: 2008-12-19
  • Posts: 3,640

Re: two columns to line up correctly

It worked when I tried it.  Just add Ben's line to your CSS.

  • Registered: 2009-10-31
  • Posts: 34

Re: two columns to line up correctly

i added Ken's code, but in the second column the last by does not line up with the last article.

  • Gender: Female
  • From: San Antonio, TX
  • Registered: 2008-12-19
  • Posts: 3,640

Re: two columns to line up correctly

Is each author supposed to be lined up to the respective article?  You could use a table, or keep the authors inside the <li> tags next to the article.

Don't use <br>s between <li>s - if you need more space, add margins or padding.

  • Registered: 2009-10-31
  • Posts: 34

Re: two columns to line up correctly

yes, each author is suppose to be lined up next to the respective article

  • Gender: Female
  • From: San Antonio, TX
  • Registered: 2008-12-19
  • Posts: 3,640

Re: two columns to line up correctly

So why not

<ul class="idTabs1">
                        <li><a href="Why.pdf">Why?</a> by Ms. Josephine Yan</li><br>
                        <li><a href="Eastern & Western culture.pdf">Bridging between Eastern and Western Culture</a> by Dr. Edwin Leung</li><br>

                        <li><a href="Journey.pdf">Long Journey, Small Thoughts</a> by Ms. Mei Huang</li><br>
                        <li><a href="Confucious & Francis of Assisi.pdf">Confucious and Francis of Assisi</a></li> by Fr. Abraham Chiu OFM<br>
                        <li><a href="Digital Camera.pdf">Dummy Digital Camera can take beautiful pictures as well</a> by Mr. Andy Szeto</li><br>
                        <li><a href="meeting people-making friends.pdf">2006-2008 Meeting People, Making Friends</a></li> by Mr. Joe Tye<br> 
                        </ul>
                        </div>

?

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: 2008-12-19
  • Posts: 2,343

Re: two columns to line up correctly

I agree with Thelma above -- in order to do what you're trying to do, you aren't going to be able to do that with two separate lists.

Either you'll need to do something like what Thelma suggested, or something more like this, where you have the two columns within the li:

<ul class="idTabs1">
<li><span class="left">title</span><span class"right">name</span></li>
</ul>

#idTabs li { overflow:auto; width: 400px; }
#idTabs1 li .left { display:block; float:left; }
#idTabs1 li .right { display:block; float:right; }

Also, if you want spacing between your items -- add padding or margin. Adding <br>s between the elements may cause problems because it's invalid code.