There has got to be a better way...

[ehartnett00]

I'm a css newbie trying to put something together for work. I've used some code from other sites to put together a design that I'm happy with. My problem is that it seems that I'm spending way too much time trying to get things to line up. I have two columns in a number of places and I can get the text in the first column to line up but getting the text to line up in the second column has been a problem as you'll be able to see from my code below. I got things to look good pretty easily with ff but when I checked ie I really had to make most of the modifications you see. Here is my css:body {background: white; color: black; font-family: times}div#main2 {width: 75%; margin: 1em 12.5% 2em; background: #BDE}div#punch {float: left; font-size: 400%; width: 2.0em; text-align: center; padding: 0.1em 0.1em 0; background: #346; color: white; border: solid white 1px; border-width: 0 0.2em 0.2em 0; margin: 0 0.5em 0.2em 0;}div#main2 h2 {margin: 0; padding: 0.25em 1em 0.125em 0; background: #8AB; text-align: right; text-transform: lowercase; font-family: sans-serif; border-bottom: 1px solid #68A;}div#main2 h4 {margin-left: 87px; margin-top: 0; padding: 0.25em 1em 0.125em 0.25em; background: #DFEAFF; text-align: left; text-transform: lowercase; font-family: sans-serif; border-bottom: 1px solid #68A;}div#main2 p.first {margin-left: 25%}div#main2 p.second {margin-left: 92px}div#main2 p.seconda {margin-left: 130px}div#main2 p.third {margin-left: 140px}div#main2 p.fourth {margin-left: 60px}div#main2 p.fifth {margin-left: 160px}div#main2 p.sixth {margin-left: 38px}p.printversion {margin-left: 585px; font-size:90%; color:#346}strong:hover:after{content: "\00BB"}strong:hover:before{content: "\00AB"}Here is a link to the page I'm working on:Psychology Subject GuideIs there a better/easier way to get things to line up?Thanks for your help.

[raimo]

Sorry, english is not my native lanquage so I don't know what actually means "line up". Hmmm, there is "something" out there and then that "something" should be as line(ed) up? It means "linja ylös" or "viiva ylös" in finnish, my very native language.And there is no any sense at all with those two words and HTML content. Sorry. HTML is as my second native language and there is one missing </div> in psychology.html In HTML div end-tag is required with all divs. <div id="main2"> end-tag is missingedit: I'd look You pages with my whole browser army, and stillcan't get it .. what means "line up" everyting looks fine with all browsers. :)My very strong browser army:MSIE 6.0, Opera 8.51, Opera 8.52, Opera 8.53, Opera 9PV2 (2x), Firefox and K-Meleon. There is Lynx too as a reserve, but not used this time.edit2:<p><table>..</table></p>I think You need change p to div there

Edited March 31, 2006 by raimo

[Jonas]

:)You have four versions of Opera? "Line up" would be the same as align: To place the text and get it to stay exactly where he wants it to, often relative to something else.

[raimo]

:)You have four versions of Opera? "Line up" would be the same as align: To place the text and get it to stay exactly where he wants it to, often relative to something else.

<{POST_SNAPBACK}>

Yes, 4 versions (+ couple different 9 PVs and one old bork-opera too)I'm extremely fanatic Opera collector! :)Line up is align? ok: but in my foggy eyes there is no problems with align?If You need get things moved vertically try vertical-align:http://www.w3schools.com/css/pr_pos_vertical-align.aspposition: relative; could help, and sometimes margin (negative or positive) and padding can be helpfull too.

[ehartnett00]

HTML is as my second native language and there is one missing </div> in psychology.html In HTML div end-tag is required with all divs.

Thanks. I missed that.I guess my original post was not very clear. I guess what I'm really getting at is that thoughout my page I have different places where the I have the text broken down into two columns using tables. In order for the text in the second columns to be aligned throughout the page I have had to use "margin-left" using various lengths. Is there a better/easier way to get the second columns to align throughout the page without having to use a different "margin-left" length, by way of trial and error, for each group.If it would be more helpful, I could post my html code as well.Thanks.