SitePoint Sponsor

User Tag List

Results 1 to 19 of 19

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I need help with columns.

    I am converting one web site into a tableless web site and am nearly complete with the project. Centauri helped me last week with profoundly great advice that worked like a charm. I have one problem left that I do not know how to deal with. I need to have two columns that have text side by side. This is the old web site and how the columns look now: http://www.gccnorwich.com/committees.htm

    I need to have that same two column look on a page such as this: http://www.tomkaszuba.com/test/history.html

    How can this be done? I know I can pop a table in there....but....this is a tableless web site so if this can be pulled off without tables it would be just great.

    Thank you,
    Tom_K

  2. #2
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would use floats. Maybe something like this:

    Code HTML4Strict:
    #left-column {
    float: left;
    }
     
    #right-column {
    float: left;
    margin-left: 20px;
    }

    Code HTML4Strict:
    <div id="left-column">
    ...Left column content...
    </div>
     
    <div id="right-column">
    ...right column content...
    </div>
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  3. #3
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deronsizemore View Post
    I would use floats. Maybe something like this:

    Code HTML4Strict:
    #left-column {
    float: left;
    }
     
    #right-column {
    float: left;
    margin-left: 20px;
    }

    Code HTML4Strict:
    <div id="left-column">
    ...Left column content...
    </div>
     
    <div id="right-column">
    ...right column content...
    </div>
    Thank you. That looks very close to what I need. I applied your code and this is what it looks like now. I need to center those two columns better but this is a quantum leap forward: http://www.tomkaszuba.com/test/history.html#

    Any more tweaks to make it just perfect?

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, Tom, that looks like a list of names, and would be better marked up as a single unordered list. If the <li>s are made 50&#37; of the width of the <ul> and floated left, two columns will naturally be formed without any non-semantic divs being required.

    Won't be back on here for a couple of hours, but I can knock up an outline for you then if you like.

    Cheers
    Graeme

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Graeme's advice with using a list and floating the items is a good one * picks up the baton..*
    Code:
    .founders {
      margin: 0;
      padding: 0;
      list-style: none; /* remove bullets */
      overflow: hidden; /* Clear floats */
      width: 100&#37;; /* Clear flots in IE */
    }
    .founders li {
      margin: 0;
      padding: 0;
      float: left;
      width: 49.9%;
    }
    Code:
    <ul class="founders">
      <li>Samuel Mowry</li>
      <li> William H. Coit</li>
      <li> Mrs. Cornelia E. Coit</li>
      <li> Noah Davis</li>
      <li> Miss Mary M. Lathrop</li>
      <li> Jonathan R. Davis</li>
      <li> Benjamin Durfey</li>
      <li> Harvey Lathrop</li>
      <li> Mrs. Octavia Lathrop</li>
      <li> Wilson Potter</li>
      <li>Nathan P. Avery</li>
      <li>Asa Peck</li>
      <li> Mrs. Lydia Peck</li>
      <li> Walter O. Pearl</li>
      <li> Mrs. Esther Pearl</li>
      <li> James Sisson</li>
      <li> Mrs. Mary Avery</li>
      <li> Mrs. Cynthia L. Potter</li>
      <li> Mrs. Cordelia E. Durfey</li>
      <li> Miss Eunice A. Avery</li>
    </ul>
    I've made the width's 49.9% so it works in IE, see FAQ on floats(50% + 50% = 101%!)

    Also, here's a little tutorial I wrote on Columns and CSS which might also interest you - but the above version doesn't require the other divisions and is easier to maintain.

    Hope it helps
    http://www.yellowshoe.com.au/tips/columns-again/

  6. #6
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    * picks up the baton..*
    Well picked ..... up, that is

  7. #7
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I applied the code you posted. For some reason the list cuts off and only displays a 4 names when it should display over 20 names. http://www.tomkaszuba.com/test/history.html

    I am grateful for this assistance. How should I proceed from here?

    Edit. I fixed the problem. It's explained in the post after the following one.
    Last edited by Tom_K; Sep 27, 2007 at 11:31.

  8. #8
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    * picks up the baton..*
    Way to run the anchor leg of the relay!

    I guess I misunderstood what was being asked totally. My fault Tom.

    Mark, with overflow:hidden on the ul element, is that essentially the same idea as using the .clearfix method? Any element which contains floated children gets overflow:hidden?
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  9. #9
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deronsizemore View Post
    Way to run the anchor leg of the relay!

    I guess I misunderstood what was being asked totally. My fault Tom.
    Actually you did understand my original post. I do need two columns for the final page on the site which it titled "committees". That needs two columns and I figured that if I could do it with the history page then I could apply the same code for the committees page.

    However, I do think the list will work better on the history page as has been suggested.
    Last edited by Tom_K; Sep 27, 2007 at 10:35.

  10. #10
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    I figured it out! In the #rightbodyPan ul I just removed the height:200px; element and it worked.
    You've got other predefined styles that are interfering with the new styles so you will to make the selectors more specific that the previous and override any styles that you don't want for that particular list.
    Quote Originally Posted by deronsizemore View Post
    Mark, with overflow:hidden on the ul element, is that essentially the same idea as using the .clearfix method? Any element which contains floated children gets overflow:hidden?
    In all popular browsers overflow:hidden works similarly to the clearfix method, though it also has other effects like cutting of constrained content but for simple layouts like a parent containing two floats I haven't had any problems with it, it's great because it's just one rule. overflow: auto; also works but can sometimes bring up scroll bars.

    deronsizemore post seemed to work well except for the positioning being a bit off.
    You just need to set widths for the floats - A float without a width will shrink wrap it's contents(become as small in width as possible) so just set equal width's for these or use the 50&#37; / 50% technique from my example - though it's simpler just to set fixed width's as your site is a fixed width layout.

    Hope it helps

  11. #11
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    In all popular browsers overflow:hidden works similarly to the clearfix method, though it also has other effects like cutting of constrained content but for simple layouts like a parent containing two floats I haven't had any problems with it, it's great because it's just one rule. overflow: auto; also works but can sometimes bring up scroll bars.
    Nice! I may have to start using that for my layouts as I try to keep them fairly simple anyway, so it should work for what I normally do. I can never fully remember the clearfix code so I always copy/paste it. Overflow:hidden is really simple to remember.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  12. #12
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I figured it out! In the #rightbodyPan ul I just removed the height:200px; element and it worked.

    I do need a two column set up for the "committees" page though.

    deronsizemore post seemed to work well except for the positioning being a bit off. I need two columns below the paragraph on this page: http://www.tomkaszuba.com/test/committees.html

    The old site columns looked like this: http://www.gccnorwich.com/committees.htm

    I appreciate the help very much.

  13. #13
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is the #rightbodyPan ul actually used for anything else? I ask as the founders list is still one column as its style is being over-ridden by the #rightbodyPan ul style, as this is more specifically targeted. If you refer to the founders list as #rightbodyPan .founders then the styles do get applied, but some other things need to be set to counter styles set in #rightbodyPan ul :
    Code:
    #rightbodyPan .founders {
      margin: 0 auto 20px;
      position: static;
      padding: 0;
      list-style: none; /* remove bullets */
      overflow: hidden; /* Clear floats */
      width: 25em;
      height: auto;
    }
    #rightbodyPan .founders li {
      margin: 0;
      padding: 0;
      float: left;
      width: 49.9%;
    }

  14. #14
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Centauri View Post
    Is the #rightbodyPan ul actually used for anything else? I ask as the founders list is still one column as its style is being over-ridden by the #rightbodyPan ul style, as this is more specifically targeted. If you refer to the founders list as #rightbodyPan .founders then the styles do get applied, but some other things need to be set to counter styles set in #rightbodyPan ul :
    Code:
    #rightbodyPan .founders {
      margin: 0 auto 20px;
      position: static;
      padding: 0;
      list-style: none; /* remove bullets */
      overflow: hidden; /* Clear floats */
      width: 25em;
      height: auto;
    }
    #rightbodyPan .founders li {
      margin: 0;
      padding: 0;
      float: left;
      width: 49.9%;
    }
    I made the correction and it did the trick as can be seen here: http://www.tomkaszuba.com/test/history.html

    Being new at this I mistakenly used .founders rather than #rightbodyPan .founders in the css. Your fix worked perfectly.

    Would it be possible for me to use that same code to format the two columns at this link into two columns at the updates web site correctly? http://www.gccnorwich.com/committees.htm

    I am extremely lucky to have found this forum. I would be nowhere without the help I have received here.

  15. #15
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    You could put each column in a div for each column or you could use a similar approach as above using a definition list:
    Code:
    dl {
    	margin: 0;
    	padding: 0;
    	list-style: none; /* remove bullets */
    	overflow: hidden; /* Clear floats */
    }
    dt {
    	margin: 0;
    	padding: 1em 0 0 0;
    	font-weight: bold;
    	float: left;
    	width: 100&#37;;
    }
    dd {
    	margin: 0;
    	padding: 0;
    	float: left;
    	width: 49.9%;
    }
    Code:
    <dl>
      <dt>Clerk:</dt>
      <dd>Donna Brown</dd>
      <dt>Treasurer:</dt>
      <dd>Edie Savignac</dd>
      <dt>Assistant:</dt>
      <dd>Rose Iams</dd>
      <dt>Trustees:</dt>
      <dd>Robert Mather</dd>
      <dd>David Brown</dd>
      <dd>Michael Brown</dd>
      <dd>Raymond Guillet</dd>
      <dd>David A. Brown</dd>
      <dt>Deacons:</dt>
      <dd>Richard Brown</dd>
      <dd>Lawrence Coleman</dd>
      <dd>Clarence Neal</dd>
      <dd>Seth Owen</dd>
      <dd>Sheila Hayes</dd>
      <dd>Gerry Leone</dd>
      <dd>Rose Iams</dd>
      <dd>Edie Savignac</dd>
      <dt>S.S. Supt.:</dt>
      <dd>Donna Brown</dd>
      <dt>Historian:</dt>
      <dd>Marilyn Brown</dd>
      <dt>Auditors:</dt>
      <dd>Rose Mathers</dd>
      <dd>Sara Hagel</dd>
      <dt>Evangelism &amp; Missions:</dt>
      <dd>Debbie Brown</dd>
      <dd>Rose Mather</dd>
      <dd>Marlene Owen</dd>
      <dd>Elizabeth Neal</dd>
    </dl>
    The headings occupy the full width but the names only occupy half so stack in two columns just like the example above.

  16. #16
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much markbrown4. It looks like things are very close to being finished. I applied the code you posted just above and this is the result: http://www.tomkaszuba.com/test/committees.html

    I am a novice but I am so close to completing this site with all of the help I received here.



    Any other ideas to make things perfect?

  17. #17
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Code:
    dl {
    	margin: 0;
    	padding: 0;
            padding: 0 0 0 80px;
    	list-style: none; /* remove bullets */
    	overflow: hidden; /* Clear floats */
    }
    dt {
    	margin: 0;
    	padding: 1em 0 0 0;
    	font-weight: bold;
    	float: left;
    	width: 240px;
    }
    dd {
    	margin: 0;
            padding: 0
    	float: left;
    	width: 200px;
    }
    This seems more stable within your layout

  18. #18
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alternately, if you wanted two complete columns like in the original site, you could split the list into two lists, and float each one so they are beside each other :
    Code:
    <dl>
      <dt>Clerk:</dt>
      <dd>Donna Brown</dd>
      <dt>Treasurer:</dt>
      <dd>Edie Savignac</dd>
      <dt>Assistant:</dt>
      <dd>Rose Iams</dd>
      <dt>Trustees:</dt>
      <dd>Robert Mather</dd>
      <dd>David Brown</dd>
      <dd>Michael Brown</dd>
      <dd>Raymond Guillet</dd>
      <dd>David A. Brown</dd>
      <dt>Deacons:</dt>
      <dd>Richard Brown</dd>
      <dd>Lawrence Coleman</dd>
      <dd>Clarence Neal</dd>
      <dd>Seth Owen</dd>
      <dd>Sheila Hayes</dd>
      <dd>Gerry Leone</dd>
      <dd>Rose Iams</dd>
      <dd>Edie Savignac</dd>
    </dl>
    <dl>
      <dt>S.S. Supt.:</dt>
      <dd>Donna Brown</dd>
      <dt>Historian:</dt>
      <dd>Marilyn Brown</dd>
      <dt>Auditors:</dt>
      <dd>Rose Mathers</dd>
      <dd>Sara Hagel</dd>
      <dt>Evangelism &amp; Missions:</dt>
      <dd>Debbie Brown</dd>
      <dd>Rose Mather</dd>
      <dd>Marlene Owen</dd>
      <dd>Elizabeth Neal</dd>
    </dl>
    <p style="clear: both">&nbsp;</p>
    Code:
    dl {
    	margin: 0 0 0 40px;
    	padding: 0;
    	list-style: none; /* remove bullets */
    	width: 200px;
    	float: left;
    }
    dt {
    	margin: 0;
    	padding: 1em 0 0 0;
    	font-weight: bold;
    
    }
    dd {
    	margin: 0;
    	padding: 0 0 0 10px;
    }

  19. #19
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Centauri View Post
    Alternately, if you wanted two complete columns like in the original site, you could split the list into two lists, and float each one so they are beside each other :
    Code:
    <dl>
      <dt>Clerk:</dt>
      <dd>Donna Brown</dd>
      <dt>Treasurer:</dt>
      <dd>Edie Savignac</dd>
      <dt>Assistant:</dt>
      <dd>Rose Iams</dd>
      <dt>Trustees:</dt>
      <dd>Robert Mather</dd>
      <dd>David Brown</dd>
      <dd>Michael Brown</dd>
      <dd>Raymond Guillet</dd>
      <dd>David A. Brown</dd>
      <dt>Deacons:</dt>
      <dd>Richard Brown</dd>
      <dd>Lawrence Coleman</dd>
      <dd>Clarence Neal</dd>
      <dd>Seth Owen</dd>
      <dd>Sheila Hayes</dd>
      <dd>Gerry Leone</dd>
      <dd>Rose Iams</dd>
      <dd>Edie Savignac</dd>
    </dl>
    <dl>
      <dt>S.S. Supt.:</dt>
      <dd>Donna Brown</dd>
      <dt>Historian:</dt>
      <dd>Marilyn Brown</dd>
      <dt>Auditors:</dt>
      <dd>Rose Mathers</dd>
      <dd>Sara Hagel</dd>
      <dt>Evangelism &amp; Missions:</dt>
      <dd>Debbie Brown</dd>
      <dd>Rose Mather</dd>
      <dd>Marlene Owen</dd>
      <dd>Elizabeth Neal</dd>
    </dl>
    <p style="clear: both">&nbsp;</p>
    Code:
    dl {
        margin: 0 0 0 40px;
        padding: 0;
        list-style: none; /* remove bullets */
        width: 200px;
        float: left;
    }
    dt {
        margin: 0;
        padding: 1em 0 0 0;
        font-weight: bold;
    
    }
    dd {
        margin: 0;
        padding: 0 0 0 10px;
    }
    Holy Smokes! This is it! Perfection! You folks are the greatest. I used the code you posted Centauri and Bang!.....it worked like a charm.

    A profound thanks to all who have helped me here. This forum is truly amazing. I'm a novice at this but I can't wait to start studying up on all of the web dev info.

    From The USA to Australia........I salute you!


Bookmarks

Posting Permissions

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