CODEWITHSUNDEEP
htmlcss
Mike Hovet
Mike Hovet

Reputation: 65

Display two columns without tables

I am trying to display a script, and some lyrics on a website. How can you display something like this:

screenshot

without using tables. There is a lot of it, so I want to try to avoid making multiple cells. Any other suggestions? I do have all the content in a word document, if that helps.

Is there a way to upload the word document and display it as is, instead of having to use page breaks and divs. the website I got it from, Rocky Musicdidn't look like it had any styling.

The content was wrapped in <pre> tags and this was the css:

element {
}
pre {
    font-size: 110%;
}
pre {
    overflow: auto;
    position: relative;
    width: 93%;
    padding: 0px 0px 0px 1em;
}
* {
    margin: 0px;
    padding: 0px;
}
body {
    color: #111;
    font: 82%/150% sans-serif;
}

Upvotes: 3

Views: 1098

Answers (3)

misterManSam
misterManSam

Reputation: 24702

Using meaningful markup

Let's first think of the content that we are representing.

The wrapper

The lyrics can be taken independently from the document, so the article element seems useful:

The HTML Article Element (<article>) represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable [...]

The song title / section titles / lyrics

  • The song title represents the contents of the <article>, it can be wrapped in an <h1>

  • The section titles are sub-headings of the <h1>, they can be wrapped in <h2>

  • The lyrics can be marked up with <p>; marking up paragraphs for each <h2> sub-heading

HTML complete

Our document now looks like this:

<article id="lyrics">
    <h1>Song title</h1>
    <h2>Section</h2>      
    <p>Lyrics</p>
</article>

Now that the markup is nice and meaningful, let's style it with...

The CSS

  • The h2 is floated to the left and clears the float

  • The p is floated to the left

  • Multiple paragraphs are given a left margin and clear the float with p + p

  • The end of the article clears the last float with the clear property on article:after

  • The white-space: pre on the paragraphs prevents the need for line breaks. The text will be displayed the same as it is in the HTML

Complete example

* {
  margin: 0;
}
article {
  margin: 0 auto;
  width: 600px;
  background: #FFF;
  padding: 10px;
}

/*clear the float at the end of the lyrics*/
article:after {
  content: '';
  display: block;
  clear: left;
}
h1 {
  font-size: 1em;
  margin: 0 0 20px;
  margin-left: 100px;
  /*Same as h2 width*/
}
h2,
p {
  float: left;
  font-size: 1em;
  font-weight: normal;
}
h2 {
  clear: left;
  /*Move to new line*/
  width: 100px;
}
p {
  margin: 0 0 20px;
  white-space: pre;
}

/*if there is more than one paragraph after an h2, clear it and give it a margin the same size as the h2 width */
p + p {
  margin-left: 100px;
  clear: left;
}
<article id="lyrics">
    <h1> Wild And Untamed Thing </h1>
  
    <h2>Frank:</h2>
  
    <p>My my my
My my my my my
My my my my
My my
I'm a wild and an untamed thing
I'm a bee with a deadly sting
You get a hit and your mind goes ping
Your heart'll pump and your blood will sing
So let the party and the sounds rock on
We're gonna shake it 'till the life has gone
Rose tint my world
Keep me safe from my trouble and pain</p>


    <h2>Chorus:</h2>
    <p>We're a wild and an untamed thing
We're a bee with a deadly sting
You get a hit and your mind goes ping
Your heart'll pump and your blood will sing
So let the party and the sounds rock on
We're gonna shake it 'till the life has gone
Rose tint my world
Keep me safe from my trouble and pain</p>

    <p>We're a wild and an untamed thing
We're a bee with a deadly sting
You get a hit and your mind goes ping
Your heart'll pump and your blood will sing
So let the party and the sounds rock on
We're gonna shake it 'till the life has gone, gone, gone
Rose tint my world
Keep me safe from my trouble and pain</p>


    <h2>Riff Raff:</h2> 
    <p>Frank-N-Furter, it's all over
Your mission is a failure
Your lifestyle's too extreme
I'm your new commander
You now are my prisoner
We return to Transylvania
Prepare the transit beam</p>
</article>

Upvotes: 2

Angel Angeles III
Angel Angeles III

Reputation: 300

Try this:

.clearfix:after {
  content: "";
  clear: both;
  display: block;
  }

.leftcol {
  float: left;
  width: 35%;
  box-sizing: border-box;
  }
.rightcol {
  float: right;
  width: 65%;
  box-sizing: border-box;
  }
<section class="clearfix">
  <div class="leftcol">Lorem...</div>
  <div class="rightcol">Lorem ipsum dolor sit amet...</div>
</section>
<section>
  <div class="leftcol">Lorem...</div>
  <div class="rightcol">Lorem ipsum dolor sit amet...</div>
</section>
<section>
  <div class="leftcol">Lorem...</div>
  <div class="rightcol">Lorem ipsum dolor sit amet...</div>
</section>

That works fine for me and you should be able to that to yours too.

Upvotes: 0

aiko
aiko

Reputation: 432

You can use float attribute to make that. The html would lool like this:

<div class="leftcol">
    <p>Asdfkjbwjwn</p>
</div>
<div class="rightcol">
    <p>asdjbebwkwosn</p>
</div>
<div class="cl"></div>

And this would be the CSS

.leftcol {
    float: left;
}
.rightcol {
    float: right;
}
.cl {
    clear: both;
}

Note: The "cl" div at the end of the HTML, it will "reset" the position of the next node.

Upvotes: 1

Related Questions