Multi-Column Text and line spacing...

Hi All,

I've been setting up the following page with my resume: http://michael-nally.com/resume.php.

Running an up-to-date version of Firefox at and Safari 3, the two columns line up properly (location of each job lines up with date). However, when I opened it in IE8 or (i think) a newer version of Safari on my gfs computer, there is a 3 line difference between the two (my date column is three lines shorter than the left column.

This is killing me...any help would be appreciated.

Cheers!

 

You have not structured this properly at all. You have used a bunch of <br /> tags to force placement and spacing between paragraphs. Also, you have not used heading tags correctly.

One set of h1 tags per page.

h2 tags for the division of the sections of the page.

Each paragraph should be in a set of <p> and closing </p> tag.

You have 3 <br /> tags at the top of column b which are pushing the contents down to start with.

Instead of 2 columns I would have used an item div and floated the contents so they are side by side.

 

Hi,

Thanks for the speedy reply. I've never set up columns, so this is great to learn. What do you mean by "h2 tags for the division of the sections of the page"?? I'm going to try what you've recommended and hopefully it will sort out my issues. Can you recommend a good resource for the do's and dont's of the different classes and ids? I've been free-styling so far...

Thanks again!

 

Idea: A bit easier than the column idea

HTML

<div id="wrapper"> 
  <h1>Resume of Michael Nally</h1>
  <h2>Work Experience</h2>
  <h3 class="name">Name of Co.</h3>
  <p class="date">Date employed</p>
  <p>Info about job</p>
  <h3 class="name">Name of Co.</h3>
  <p class="date">Date employed</p>
  <p>Info about job</p>
  <h2>Education</h2>
  <h3 class="name">Name of School</h3>
  <p class="date">Date</p>
  <p>Info about course</p>
</div>

HTML:

CSS

body {
background-color: #000000;
color: #ffffff;
}
#wrapper {
width: 50%;
margin-left: auto;
margin-right: auto;
}
h1, h2 {
color: #F0795B;
}
h2 {
margin-bottom: 0;
}
.name {
width: 70%;
float: left;
margin-bottom: 0;
}
.date {
width: 28%;
float: right;
}
p {
width: 70%;
}

Code (markup):

Turns out as per attached.

1 id per page. The same id can be used on multiple pages. e.g. the wrapper id above can be used on each page but only once per page

Classes can be used a number of times on a page.

Using an external stylesheet makes editing styles easier. You just edit the attached external stylesheet and it updates all the pages.

 

Hi,

Thanks so much for your time. I've fixed it to the best of my knowledge, and you're right, it works much more consistently. If you could take a peek and confirm that its better I would really appreciate it.

Thanks again!

 

Yes it is looking better but you still didn't get the heading part right. Look at the coding I included in my reply above.