Clever Geek Handbook

Displaying two columns without tables

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

screenshot

without using tables. This is a lot, so I want to try and avoid creating multiple cells. Any other suggestions? I have all the content in a word document if that helps.

Is there a way to load the word document and display it as is, instead of using page breaks and divs. the site I got it from, Rocky Music didn't look like it had any style.

The content was wrapped in tags <pre>

and this was 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;
}
+3


source to share


3 answers


Using meaningful markup

First, think about the content we present.

Wrapper

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

The HTML article element ( <article>

) is a stand-alone composition in a document, page, application, or site that is designed to be independently distributable or reusable [...]

Title / song titles / lyrics

  • Heading represents content <article>

    , it can be wrapped in<h1>

  • Section headings are subheadings <h1>

    and can be wrapped in<h2>

  • the text can be marked <p>

    ; paragraph markings for each <h2>

    subheading

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 beautiful and meaningful, let's style with ...

CSS

  • h2

    moves left and clears float

  • p

    moves left

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

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

  • white-space: pre

    in paragraphs prevents line breaks. The text will be rendered the same as in 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 all over
Your mission is a failure
Your lifestyle too extreme
I'm your new commander
You now are my prisoner
We return to Transylvania
Prepare the transit beam</p>
</article>
Run code


+2


source


You can use the float attribute for this. The html will look like this:

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

And that will be CSS



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

Note. ... The "cl" separator at the end of the HTML code will "reset" the position of the next node.

+1


source


Try the following:

.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>
Run code


This works great for me and you can do it for yourself too.

0


source






More articles:


All Articles