Alignment Of 2 Columns Of Text

I'd like the text of my second column to start at the same level as the first paragraph of the first column (Lorem Ipsum text). Is it possible? Currently it starts at the same leve

Solution 1:

In that case you need to use the .twocolumns class to div that doesn't have your heading i.e. h2 element like this

<divclass="article"><h2>Biography</h2><divclass="twocolumns"><p>Lorem ipsum dolor sit amet,....

and reset the default margin and padding for p element to make it more clear.

p
{
    margin:0;
    padding:0;
}

So basically apply .twocolumns class to those element which you want to break into two columns. In your case you doesn't want to have heading in that. So exclude it from there and put it outside.

JS Fiddle

Solution 2:

What about just moving your H2 tag outside of that div? http://jsfiddle.net/enigmarm/znD9f/4/

Massage the CSS a bit to get it the way you want.

<h2class="article">Biography</h2><divclass="article twocolumns">

Solution 3:

It is possible, take a look at this changed fiddle: http://jsfiddle.net/znD9f/2/

Tweak the HTML a little by moving the h2 out and wrapping the paragraphs in two columns.

<div class="article">
  <h2>Biography</h2><divclass="twocolumns"><p> ... <p>
    ...
  </div></div>

And tweak the CSS a little to align both columns:

.articlep {
    margin-top: 3px;   
}

I hope that solves your problem. It works on your example at least.

Solution 4:

It's not yet supported in Firefox, but the following should work in Chrome, Safari, Opera 11.1+, and IE10:

.articleh1, .articleh2 {
    -webkit-column-span: all;
    column-span: all;
}

For more information: https://developer.mozilla.org/en-US/docs/CSS/column-span.

And here's further information: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/an-introduction-to-the-css3-multiple-column-layout-module/.

Until this has broader browser support, just move the heading outside the .twocolumns div.