Question

I have a page which will only be viewed in mobile Safari. I’m trying to achieve a certain effect to match a print publication. I’ve gotten really close, but for this one last detail.

In my page I have HTML markup like this:

<section>
  <h2>Header</h2>

  <p>A long paragraph...</p>
</section>

And CSS styling like this:

section {
  padding-left: 200px;
  width: 700px;
}

h2 {
  float: left;
  width: 180px;
  margin-left: -200px;
}

The result is something like this:

Header          A long paragraph, blah blah blah...
                blah blah blah...

Which is perfect. However, if the content in the header is a little longer, it might look like this:

This is a       A long paragraph, blah blah blah...
longer header   blah blah blah...

Whereas what I would like it to do is begin the paragraph on the last line of the header, like this:

This is a
longer header   A long paragraph, blah blah blah...
                blah blah blah...

I think I could solve this using JavaScript, but I’d like to fix it in the least intrusive way possible, either purely in CSS or with minimal changes to the markup. Barring that, any ideas on a JavaScript solution? Thanks!

Answer 1

This can be done using CSS only. No need for floating either:

section {
  width: 700px;
}

section p {
  padding-left: 200px; 
  margin-top: -20px
}

section h2 {
  padding-right: 500px; 
  margin-bottom:0
}

Your HTML stays the same.