Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Run-in headings and numbers in the margin

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #254849
    inktrap
    Participant

    How could I recreate this formatting in CSS?

    I’d like to be able to do it without the display: run-in; property becasue it’s not supported in Firefox. I tried making both the heading and the following paragraph inline, but that breaks when the next heading comes immediately afterwards.

    https://codepen.io/anon/pen/OmZoBB?editors=1100#0

    Also, is there some standard way of moving numbers into the margin? Any drawbacks to position: absolute; and negative left margin?

    #254850
    Paulie_D
    Member

    Well your HTML structure needs some work.

    The inline headings really aren’t working for you.

    You be better using a proper list structure..then using headings and paragraphs if you want….that’s essentially what you have here…a list.

    You might also look into CSS Counters

    https://codepen.io/Paulie-D/pen/mmLvyG

    As for positioning the numbers…sure, I’d use absolute positioning…it’s the most logical method.

    #254851
    inktrap
    Participant

    I thought about a list, but the text is a legalese with the numbers being an integral part of the headings, because they’re mostly referenced in other documents by the number instead of name. Basically, they’re just identifiers for each section, so they need to be in the source. The sections are pretty standard (although, admittedly, somewhat short-ish) multi-paragraph body matter, and their ordering bears no weight, so I felt that it makes more sense not to use a list.

    I did find a pretty elegant hack in the meantime:

    h1::before,
    h1 + p::after {
        content: "";
        display: block;
    }
    
    #254852
    inktrap
    Participant

    Accidental double post.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.