3-Column Float (Lyrics template I want to build)

HTML & CSS
1

I am so completely over my head I frankly had to create a graphic, and here it is. If I can manage to not break Tidy I’ll clean the 4-car pileup masquerading as HTML and post it. I don’t want to get into trouble with Paul!!

This is a little project of mine to create a 3-column Lyrics template and I’m beginning with one of Michael Jackson’s songs because it is short on line-length but linearly long. Throw a rapper in there and even now I’m not sure it shouldn’t be a 4-column . . . but NO, please, 3 is enough.

I’m column-breaking only where the original lyrics are double spaced. The upshot is that since I will virtually always have 3 non-uniform columns I have to find some way to keep the longest one from column-jumping. I’ve shoved extra carrier returns into column 1 because it was the only way to keep Heavy D in his own column lol. There must be a way to do it but I finally gave up. Thanks for your help.

754×1000 42.3 KB
semi_MJ_99.html (8.3 KB)

1 Like
2

am not certain what you are trying to do. What kind of browser support are you aiming for? If you are chiefly aiming for browser from the last E10+ years I would recommend NEATLY writing all the lyrics into one containing element ( a DIV.lyric) and using .lyric { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; }
With CSS3 Multi-column Properties content will AUTOMATICALLY wrap into columns and you can easily style your columns, including: space between columns, width, even a divider line. but maybe you require more support or had a semantic reason why your text wen into each column( an it does seem as if you did…since you used multiple BRs to denote a column)… why not deposit the text from each in it’s own .lyric div.column{ width:33.3333%; display:table-cell;}?

there are many ways to make columns in CSS, the real tricky part is to know if what you were using to determine column height and what control do you have over the html markup( are you getting it from a DB, writing it yourself or merely styling a pre generated page)

1 Like
3

Here’s an example of what Dresden mentions.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Michael Jackson&rsquo;s &ldquo;JAM&rdquo;</title>
<style type="text/css">
body {
	text-align: CENTER;
	background-color: WHITE;
}
.heading {
	padding: 30px;
	text-align: left;
	font-family: ClarendonBT-BoldCondensed, Clarendon BT Bold Condensed, Serif;
	margin-left: 2%;
	margin-right: 2%;
}
.container {
	max-width:1280px;
	margin:50px auto;
	background-color: #F4F4F0;
	font-family: Letter Gothic LCY Bold, LetterGotLCYBol, MONOSPACE;
	color: #000;
	font-size: 16px;
	width: 100%;
	text-align: left;
	-webkit-column-count: 3; /* Chrome, Safari, Opera */
	-moz-column-count: 3; /* Firefox */
	column-count: 3;
	-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
	-moz-column-gap: 40px; /* Firefox */
	column-gap: 40px;
	-webkit-column-width: 100px; /* Chrome, Safari, Opera */
	-moz-column-width: 100px;
	column-width: 100px;
	-webkit-column-rule: 1px dotted #ddd;
	-moz-column-rule: 1px dotted #ddd;
	column-rule: 1px dotted #ddd;
}
.container p {
	display:inline-block;/* wrap only at end of a p block */
	vertical-align:top
}

  /*]]>*/
</style>
</head>

<body>
<div class="heading">
  <h3>Michael Jackson&rsquo;s&nbsp;.&nbsp;.&nbsp;.</h3>
  <h1>&ldquo;Jam&rdquo;</h1>
</div>
<div class="container">
  <p>Nation To Nation<br>
    All The World<br>
    Must Come Together<br>
    Face The Problems<br>
    That We See<br>
    Then Maybe Somehow<br>
    We Can Work It Out<br>
    I Asked My Neighbor<br>
    For A Favor<br>
    She Said Later<br>
    What Has Come Of<br>
    All The People<br>
    Have We Lost Love<br>
    Of What It&rsquo;s About<br>
  </p>
  <p> I Have To Find My Peace Cuz<br>
    No One Seems To Let Me Be<br>
    False Prophets Cry Of Doom<br>
    What Are The Possibilities<br>
    I Told My Brother<br>
    There&rsquo;ll Be Problems,<br>
    Times And Tears For Fears,<br>
    We Must Live Each Day<br>
    Like It&rsquo;s The Last </p>
  <p> Go With It<br>
    Go With It<br>
    Jam </p>
  <p> It ain&rsquo;t Too Much Stuff<br>
    It ain&rsquo;t Too Much<br>
    It ain&rsquo;t Too Much For Me To<br>
    Jam<br>
    It ain&rsquo;t<br>
    It ain&rsquo;t Too Much Stuff<br>
    It ain&rsquo;t<br>
    don&rsquo;t You<br>
    It ain&rsquo;t Too Much For Me To </p>
  <p> The World Keeps Changing<br>
    Rearranging Minds<br>
    And Thoughts<br>
    Predictions Fly Of Doom<br>
    The Baby Boom<br>
    Has Come Of Age<br>
    We&rsquo;ll Work It Out</p>
  <p> I Told My Brothers<br>
    don&rsquo;t You Ask Me<br>
    For No Favors<br>
    I&rsquo;m Conditioned By<br>
    The System<br>
    don&rsquo;t You Talk To Me<br>
    don&rsquo;t Scream And Shout </p>
  <p>[Michael]<br>
    Jam<br>
    It ain&rsquo;t<br>
    It ain&rsquo;t Too Much Stuff<br>
    It ain&rsquo;t Too Much<br>
    It ain&rsquo;t Too Much For Me To<br>
    Jam<br>
    Get On It<br>
    It ain&rsquo;t Too Much Stuff<br>
    It ain&rsquo;t<br>
    don&rsquo;t Stop<br>
    It ain&rsquo;t Too Much For Me To<br>
    Jam<br>
    It ain&rsquo;t<br>
    It ain&rsquo;t Too Much Stuff<br>
    It ain&rsquo;t<br>
    don&rsquo;t You<br>
    It ain&rsquo;t Too Much For Me To<br>
    Jam<br>
    It ain&rsquo;t<br>
    It ain&rsquo;t Too Much Stuff<br>
    It ain&rsquo;t<br>
    don&rsquo;t You<br>
    It ain&rsquo;t Too Much For Me To </p>
  <p> It ain&rsquo;t Too Hard For Me<br>
    To Jam [9x]<br>
    Get On It<br>
    Jam<br>
    It ain&rsquo;t<br>
    It ain&rsquo;t Too Much Stuff<br>
    It ain&rsquo;t<br>
    don&rsquo;t You<br>
    It ain&rsquo;t Too Much For Me To<br>
    Jam<br>
    It ain&rsquo;t Too Much Stuff<br>
    It ain&rsquo;t Too Much<br>
    It ain&rsquo;t Too Much For Me To<br>
    Jam<br>
    It ain&rsquo;t Too Much Stuff<br>
    It ain&rsquo;t Too Much<br>
    It ain&rsquo;t Too Much For Me To<br>
    Jam<br>
    Too Much<br>
    It ain&rsquo;t Too Much Stuff<br>
    It ain&rsquo;t<br>
    don&rsquo;t You<br>
    It ain&rsquo;t Too Much For Me To </p>
  <p> Get On It<br>
    Get On It<br>
    Give It Baby<br>
    Give It To Me<br>
    Come On<br>
    You Really Give It To Me<br>
    Got To Give It<br>
    You Just Want To Give It </p>
  <p> She Pray To God, To Buddha<br>
    Then She Sings A<br>
    Talmud Song<br>
    Confusions Contradict<br>
    The Self<br>
    Do We Know Right<br>
    From Wrong<br>
    I Just Want You To<br>
    Recognize Me<br>
    In The Temple<br>
    You can&rsquo;t Hurt Me<br>
    I Found Peace<br>
    Within Myself</p>
  <p> Go With It<br>
    Go With It<br>
    Jam<br>
    It ain&rsquo;t<br>
    It ain&rsquo;t Too Much Stuff<br>
    It ain&rsquo;t Too Much<br>
    It ain&rsquo;t Too Much For Me To<br>
    Jam<br>
    It ain&rsquo;t<br>
    It ain&rsquo;t Too Much Stuff<br>
    It ain&rsquo;t<br>
    don&rsquo;t You<br>
    It ain&rsquo;t Too Much For Me To<br>
    Jam<br>
    It ain&rsquo;t Too Much Stuff<br>
    It ain&rsquo;t Too Much<br>
    It ain&rsquo;t Too Much For Me To<br>
    Jam<br>
    It ain&rsquo;t<br>
    It ain&rsquo;t Too Much Stuff<br>
    It ain&rsquo;t<br>
    don&rsquo;t You<br>
    It ain&rsquo;t Too Much For Me To </p>
  <p><span style="color: #C76B73; font-style: italic;">[Rap Performed By Heavy
    D]</span><br>
    Jam Jam<br>
    Here Comes The Man<br>
    Hot Damn<br>
    The Big Boy Stands<br>
    Movin&rsquo; Up A Hand<br>
    Makin&rsquo; Funky Tracks<br>
    With My Man<br>
    Michael Jackson<br>
    Smooth Criminal<br>
    That&rsquo;s The Man<br>
    Mike&rsquo;s So Relaxed<br>
    Mingle Mingle Jingle<br>
    In The Jungle<br>
    Bum Rushed The Door<br>
    3 And 4&rsquo;s In A Bundle<br>
    Execute The Plan<br>
    First I Cooled Like A Fan<br>
    Got With Janet<br>
    Then With Guy<br>
    Now With Michael<br>
    Cause It ain&rsquo;t Hard To&nbsp;.&nbsp;.&nbsp;. </p>
</div>
</body>
</html>

Note that breaks are fine for line breaks in the lines of the verse but not for the end of the verse where you use a double break. You should use a p tag for each verse and create the space with a vertical margin on the p tag. (Browsers use to ignore double breaks in some cases as they were never meant for creating vertical space but simply as a line break).

4

I think maybe the OP was wondering how to use css to have the lyrics of any song break into the next column at a point where there is a double space in the lyrics. How would each verse within its <p></p> tags be forced into a new column, instead of splitting the content so that each column is the same height?

2 Likes
5

The code I offered above will not break in the middle of the verse but at the end of the verse at the end of a p tag (which is where the double break was). The columns will automatically be equal height taking into account that some verses need to move to a new column so there will always be a little space at the bottom.

I’m guessing you could justify vertically using flexbox but then that would stretch the spaces between blocks which would look odd.

1 Like
6

For the record friends, I loathe rap. :confounded: The only reason I chose this otherwise useless article is because it’s an inch wide and a mile deep. I nail this little devil, and everything else in the Michael canon should be considerably easier to reproduce.

[quote=“dresden_phoenix, post:2, topic:212538, full:true”]
. . . the real tricky part is to . . . determine column height (SNIP)[/quote]
ipso facto, why I started this thread. Short of manually adding carriage returns, I don’t know how to automatically structure the vertical length based upon the longest column. :confused:

[quote=“WebMachine, post:4, topic:212538, full:true”]
I think maybe the OP was wondering how to use css to have the lyrics of any song break into the next column at a point where there is a double space in the lyrics. How would each verse within its <p></p> tags be forced into a new column, instead of splitting the content so that each column is the same height?[/quote]
Correct! :smiley:

[quote=“PaulOB, post:3, topic:212538, full:true”]
You should use a p tag for each verse and create the space with a vertical margin on the p tag.[/quote]
Hi Paul, belated happy new year. I completely understand the concept. The theory is both graceful and simple and I’ll implement it immediately. Thank you. :stuck_out_tongue_winking_eye:

[quote=“PaulOB, post:3, topic:212538, full:true”]
Here’s an example of what Dresden mentions. (SNIP)[/quote]
Dresden, Paul . . .
Did you view your code in a browser? Because I ran it up the flagpole in Chrome and it broke the column positions – that, using either your

<!DOCTYPE HTML>

or my

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html40/strict.dtd">.

As WebMachine pointed out, I am manually choosing the column break points: I paste the lyrics into my text editor with line numbering; divide by 3; and approximate the column breaks based upon the nearest, most logical stanza break. My original code had this one redeeming feature: The columns are in order. Column 2 ends with the last line of Heavy D’s rap so that Column 3 begins with [Michael]'s re-entry into the song.

Automating the columns lengths is mission one; but achieving the “framed” appearance you see in my graphic is what really bedeviled me. I can always manually add carriage returns to tame the columns, but egads the frames! Padding? Margins? and where? and how?

7

I had the same issue a while ago with putting a list into columns and having problems with the css cutting a list item in half to make the columns the same height. I was provided with a solution that worked, and it might be relevant to this issue also.

I believe it was @RyanReese that suggested using this code:

     -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        break-inside: avoid;
1 Like
8

Yes of course I did. Did you? :smile:

The words may not have been in the right order because I just copied the html you had and I don’t know the song, Just put the words in the right order.

Here it is in a codepen working in the latest IE, Firefox and Chrome.

The column order is logical and automatic so you just need the words in their correct order As I said before you should not use double breaks ever and without p tags around each verse you have no semantics at all.

Is that not what you wanted or have I misunderstood ?

Yes that will work for modern browsers but the inline-block solution I gave above was more foolproof as the page-break was poorly supported. You could add both to be safe although I suppose the inline-block may affect those that don’t support columns so maybe page-break is better.

9

Are you just referring to the borders around the page? If so then just add thick borders to the container in my example.

10

I failed to add in my lead post that I’m trying to achieve absolute margins on .container: I don’t want the browser (any browser) to show white behind my .container and so I’ve used negative margins. Well of course it doesn’t work! lol :joy: where’s my violin . . .

[quote=“WebMachine, post:7, topic:212538”]
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;[/quote]
This looks foolproof wm (yeah, I’ll be eating those 4 words, just you wait). Can I declare it once? or does each column have to declare it?

[quote=“PaulOB, post:9, topic:212538”]
Are you just referring to the borders around the page? If so then just add thick borders to the container in my example.[/quote]
I tried that first Paul but for some reason the columns threw the code (conflicts with float?).

11

What float?

12

[quote=“PaulOB, post:9, topic:212538”]
Are you just referring to the borders around the page? If so then just add thick borders to the container in my example.[/quote]
See what I mean? I can’t even get it to show 2 frames. Attempt floated columns in this and you are creating Cubism. :grimacing:

Edit: I need to re-examine this.

13

No you declare it for the container that has the columns set, which is .container

1 Like
14

ipso facto, why I started this thread. Short of manually adding carriage returns, I don’t know how to automatically structure the vertical length based upon the longest column. :confused:

well that what I was getting at. By necessity, column height would be user defined ( that is, the user would determine what makes a column, and then mark it in some way… for example, as you have suggested, by using two BR tags. The thing is that CSS does not interpret or understand the content ( only the tags that contain content).

That lead to my follow up suggestion. If you are manually entering the songs you can create a DIV for each intended column. But if you are using a preprocessing language, such as PHP you could run a short function to wrap the tags around each intended column. e.g…:

$myLyrics= "the lyrics...";
echo "<div class='lyrics'>\n<div>".str_replace("<br><br>", "</div>\n<div>", $myLyrics) ."</div>\n</div>";

Note that you may want to tweak the "<br><br>" to account for spaces and returns, but that’s the gist of it.

From that point on you swill have the lyric broken up into as many columns as you have "<br><br>"s which you can then use any number of CSS techniques to style.

Can I declare it once? or does each column have to declare it?

I hope you aren’t getting confused with seeing ‘page break’ declared 3 times. Just to clarify, each of those was targeting different browsers in ONE rule. :slight_smile:

hope that helps

16

If we could just skip the column size issue for the moment, the graphic I’m attaching is the objective. Quite frankly if I knew the columns would be this much trouble I’d just say skip it and manually enter the filler lines. I’ve been trying to faithfully render this design using float but perhaps I should just do this as a table?

In any event, the result should not be a solid #E2E2D8; background; the result should look like this:

1022×1352 29.6 KB

17

[quote=“dresden_phoenix, post:14, topic:212538”]
If you are manually entering the songs you can create a DIV for each intended column.[/quote]
How would I get them all on one row? hmmm . . .

18

there are many ways to horizontally align elements with CSS, but the main concept is you’ll need AT LEAST a container element and and element for each desired column.

<div class="container">
	<div class="column">..</div>
	<div class="column">..</div>
	<div class="column">..</div>
</div>

you could now:
Set box-sizing:border-box; for all elements mentioned. Float all the .column DIVs, stetting their width to 33.33% and use overflow hidden to contain them; BTW with this you could also get your border/bg color issue solved easily

OR
instead of floating the .column DIVs, you could give them display:inline-block; sizing might be a little bit more challenging, but the column will also have roughtly 1/2 em of space between them by default.

OR
you could set display: flex; on the .container DIV.

19

I don’t understand why floats are still being mentioned. Surely the css columns are a far more elegant solution for this, exactly what they were intended for.
If you do want absolute control over the columns start/ends, you would need to group the columns in divs, like dresden phoenix suggests, and display those as inline-block with css columns, instead doing that on a per <p> basis as Paul did.

I hope you mean css table and not html <table>.
display:table-cell is another option for the columns.

20

There is no such thing as absolute margins so I have no idea what you mean here? Margins are just margins. :smile:

Again this makes no sense. If you don’t want the container white then don;t give it a background colour and then its background will be whatever the body background is? I don’t see how negative margins has anything to do with this question either?

You seem to be throwing tons of ill advised rules at this project where none are needed. The only complicated aspect is the automatic columns which these days is achieved easily with css columns as I have already shown. If you want to manually finish a column then as Sam suggests you can use the display:inline-block approach on a div on each column but then you don;t have automatic columns unlike the method I have used.

Here’s a full example with borders colours and table at the bottom and looks exactly like your drawing.

This is the sort of valid code you should be using along with the correct doctype. Even if this is not exactly what you want you need to work along the same approach and not throw unnecessary rules at the layout. Most of all you need to ensure that what you put on to the page is semantic html. Double or treble breaks are unreliable and semantically very bad and should never be used. I realise you may be limited by your editor but that doesn’t mean I will endorse bad practices :smile:

4 Likes
21

Paul, may your camel never pee in your tent :laughing: your date harvest be bountiful, and my posts I never ever give offense (stylewise or otherwise) to one who has taught me so much. We don’t deserve you Paul (least of all me).

Now the update from my end is that I managed to limp my project along and get it partially correct. Yes, the frame is nonexistent and does happen to be a very high priority. Following is my update (TidyFied), waddathink? Hopping over to codepen . . .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="generator" content=
  "HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org" />
  <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />

  <title>Michael Jackson&rsquo;s &ldquo;JAM&rdquo;</title>
  <style type="text/css">
/*<![CDATA[*/

  body {
      text-align: LEFT;
  background-color: WHITE;
          margin: 0px;
  }

  .HEADING {
  background-color: WHITE;
      text-align: left;
     font-family: ClarendonBT-BoldCondensed, Clarendon BT Bold Condensed; Serif;
       font-size: 16px;
     line-height: 18px;
      margin-top: 60px;
     margin-left: 60px;
    margin-right: 60px;
  }

  .SONGTITLE {
  background-color: WHITE;
      text-align: left;
     font-family: ClarendonBT-BoldCondensed, Clarendon BT Bold Condensed; Serif;
       font-size: 30px;
     line-height: 34px;
   margin-bottom: 50px;
     margin-left: 60px;
    margin-right: 60px;
  }


  <!-- ==============DETAILS================TOP RIGHT BOTTOM LEFT============================== -->
  .CONTAINER {
    border-width: 30px;
    border-color: #555577;
         display: TABLE;
  }

  .LEFT {
           float: LEFT;
           width: 32%;
     margin-left: 30px;
  }

  .MIDDLE {
           float: LEFT;
           width: AUTO;
   margin-bottom: 30px;
  }

  .RIGHT {
           float: RIGHT;
           width: 32%;
    margin-right: 30px;
  }

  .FOOTER {
           clear: BOTH;
     font-family: Letter Gothic LCY Bold, LetterGotLCYBol, MONOSPACE;
       font-size: small;
           color: #555577;
  background-color: #F4F4F0;
          border: 5px solid #565A7B;
      text-align: LEFT;
     font-weight: NORMAL;
      font-style: NORMAL;
    font-stretch: NORMAL;
          height: AUTO;
  }

  /*]]>*/
  </style>
</head>

<body>
  <div class="HEADING">
    Michael Jackson&rsquo;s&nbsp;.&nbsp;.&nbsp;.
  </div>

  <div class="SONGTITLE">
    &ldquo;Jam&rdquo;
  </div>

  <div class="CONTAINER">
    <div class="LEFT">
      Nation To Nation<br />
      All The World<br />
      Must Come Together<br />
      Face The Problems<br />
      That We See<br />
      Then Maybe Somehow<br />
      We Can Work It Out<br />
      I Asked My Neighbor<br />
      For A Favor<br />
      She Said Later<br />
      What Has Come Of<br />
      All The People<br />
      Have We Lost Love<br />
      Of What It&rsquo;s About<br />
      <br />
      I Have To Find My Peace Cuz<br />
      No One Seems To Let Me Be<br />
      False Prophets Cry Of Doom<br />
      What Are The Possibilities<br />
      I Told My Brother<br />
      There&rsquo;ll Be Problems,<br />
      Times And Tears For Fears,<br />
      We Must Live Each Day<br />
      Like It&rsquo;s The Last<br />
      <br />
      Go With It<br />
      Go With It<br />
      Jam<br />
      It ain&rsquo;t Too Much Stuff<br />
      It ain&rsquo;t Too Much<br />
      It ain&rsquo;t Too Much For Me To<br />
      Jam<br />
      It ain&rsquo;t<br />
      It ain&rsquo;t Too Much Stuff<br />
      It ain&rsquo;t<br />
      don&rsquo;t You<br />
      It ain&rsquo;t Too Much For Me To<br />
      <br />
      The World Keeps Changing<br />
      Rearranging Minds<br />
      And Thoughts<br />
      Predictions Fly Of Doom<br />
      The Baby Boom<br />
      Has Come Of Age<br />
      We&rsquo;ll Work It Out<br />
      <br />
      I Told My Brothers<br />
      don&rsquo;t You Ask Me<br />
      For No Favors<br />
      I&rsquo;m Conditioned By<br />
      The System<br />
      don&rsquo;t You Talk To Me<br />
      don&rsquo;t Scream And Shout<br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
    </div>

    <div class="MIDDLE">
      She Pray To God, To Buddha<br />
      Then She Sings A<br />
      Talmud Song<br />
      Confusions Contradict<br />
      The Self<br />
      Do We Know Right<br />
      From Wrong<br />
      I Just Want You To<br />
      Recognize Me<br />
      In The Temple<br />
      You can&rsquo;t Hurt Me<br />
      I Found Peace<br />
      Within Myself<br />
      <br />
      Go With It<br />
      Go With It<br />
      Jam<br />
      It ain&rsquo;t<br />
      It ain&rsquo;t Too Much Stuff<br />
      It ain&rsquo;t Too Much<br />
      It ain&rsquo;t Too Much For Me To<br />
      Jam<br />
      It ain&rsquo;t<br />
      It ain&rsquo;t Too Much Stuff<br />
      It ain&rsquo;t<br />
      don&rsquo;t You<br />
      It ain&rsquo;t Too Much For Me To<br />
      Jam<br />
      It ain&rsquo;t Too Much Stuff<br />
      It ain&rsquo;t Too Much<br />
      It ain&rsquo;t Too Much For Me To<br />
      Jam<br />
      It ain&rsquo;t<br />
      It ain&rsquo;t Too Much Stuff<br />
      It ain&rsquo;t<br />
      don&rsquo;t You<br />
      It ain&rsquo;t Too Much For Me To<br />
      <br />
      <span style="color: #C76B73; font-style: italic;">[Rap Performed By Heavy
      D]</span><br />
      Jam Jam<br />
      Here Comes The Man<br />
      Hot Damn<br />
      The Big Boy Stands<br />
      Movin&rsquo; Up A Hand<br />
      Makin&rsquo; Funky Tracks<br />
      With My Man<br />
      Michael Jackson<br />
      Smooth Criminal<br />
      That&rsquo;s The Man<br />
      Mike&rsquo;s So Relaxed<br />
      Mingle Mingle Jingle<br />
      In The Jungle<br />
      Bum Rushed The Door<br />
      3 And 4&rsquo;s In A Bundle<br />
      Execute The Plan<br />
      First I Cooled Like A Fan<br />
      Got With Janet<br />
      Then With Guy<br />
      Now With Michael<br />
      Cause It ain&rsquo;t Hard To&nbsp;.&nbsp;.&nbsp;.
    </div>

    <div class="RIGHT">
      [Michael]<br />
      Jam<br />
      It ain&rsquo;t<br />
      It ain&rsquo;t Too Much Stuff<br />
      It ain&rsquo;t Too Much<br />
      It ain&rsquo;t Too Much For Me To<br />
      Jam<br />
      Get On It<br />
      It ain&rsquo;t Too Much Stuff<br />
      It ain&rsquo;t<br />
      don&rsquo;t Stop<br />
      It ain&rsquo;t Too Much For Me To<br />
      Jam<br />
      It ain&rsquo;t<br />
      It ain&rsquo;t Too Much Stuff<br />
      It ain&rsquo;t<br />
      don&rsquo;t You<br />
      It ain&rsquo;t Too Much For Me To<br />
      Jam<br />
      It ain&rsquo;t<br />
      It ain&rsquo;t Too Much Stuff<br />
      It ain&rsquo;t<br />
      don&rsquo;t You<br />
      It ain&rsquo;t Too Much For Me To<br />
      <br />
      It ain&rsquo;t Too Hard For Me<br />
      To Jam [9x]<br />
      Get On It<br />
      Jam<br />
      It ain&rsquo;t<br />
      It ain&rsquo;t Too Much Stuff<br />
      It ain&rsquo;t<br />
      don&rsquo;t You<br />
      It ain&rsquo;t Too Much For Me To<br />
      Jam<br />
      It ain&rsquo;t Too Much Stuff<br />
      It ain&rsquo;t Too Much<br />
      It ain&rsquo;t Too Much For Me To<br />
      Jam<br />
      It ain&rsquo;t Too Much Stuff<br />
      It ain&rsquo;t Too Much<br />
      It ain&rsquo;t Too Much For Me To<br />
      Jam<br />
      Too Much<br />
      It ain&rsquo;t Too Much Stuff<br />
      It ain&rsquo;t<br />
      don&rsquo;t You<br />
      It ain&rsquo;t Too Much For Me To<br />
      <br />
      Get On It<br />
      Get On It<br />
      Give It Baby<br />
      Give It To Me<br />
      Come On<br />
      You Really Give It To Me<br />
      Got To Give It<br />
      You Just Want To Give It
    </div>
  </div><!-- CLOSES CONTAINER -->

  <div class="FOOTER">
    <table border="2" cellpadding="3" cellspacing="0">
      <tbody>
        <tr>
          <th>VIDEO</th>

          <th>SONG</th>

          <th>ALBUM</th>

          <th>YEAR</th>

          <th>TITLE</th>
        </tr>

        <tr>
          <td>Runtime</td>

          <td>Runtime</td>

          <td>Album Title</td>

          <td>Year Released</td>

          <td>Song</td>
        </tr>
      </tbody>
    </table><br />
    <span style="color: #555577; font-size: medium;">Live Performance &amp; Tour
    Notes&nbsp;.&nbsp;.&nbsp;.</span><br />
  </div>
</body>
</html>