Creating two column layout in body

  • Unknown's avatar
    gotmaester · Member ·

    The only kind of column layout I am familiar with is using the following html code that I found on WordPress:

    
Your content for your column #1
Your content for your column #1
Your content for your column #1
    


    
Your content for your column #2
Your content for your column #2
Your content for your column #2

    Here is the page I used it on:

    https://game-of-thrones-episodes.com/101-winter-is-coming/

    My question is:

    Is there a way to may the text in the first column automatically flow into the second column?

    I would appreciate any help I can get.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, there is some CSS that we can use to make columns from content. It will try and keep the columns the same length though, which means that it may break your content within a bulleted list instead of after. It would require revision to your text content. You can try it on a draft page to see how it works. First you will need to wrap all the content in a single div like this. 

    <div class="my-columns">
all the content here
</div>

    And then here is the CSS. 

    .my-columns {
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
  -webkit-column-gap: 3em;
  -moz-column-gap: 3em;
  column-gap: 3em;
}
  • Unknown's avatar
    gotmaester · Member ·

    awesome, a whole easier. BUT, is there a way to manipulate lines.

    For example, on the following page, I kept the HTML version on top, and then included the CSS Version below, for comparison purposes. The only difference is the one you mentioned would happen.

    I tried to place a couple of
    in the code, but it doesn’t work. Is that a WP issue, or maybe that is no longer supported in recent versions of html? Because I remember using that a lot about 17 years ago.

    Any suggestions?

  • Unknown's avatar
    gotmaester · Member ·

    oops, here is the page

    https://game-of-thrones-episodes.com/701-dragonstone/

  • Unknown's avatar
    gotmaester · Member ·

    \
    tags \ which i noticed was stripped out above, which tells me it must be a WP issue

  • Unknown's avatar
    gotmaester · Member ·

    I will try this again!!!!

    /*
    */

  • Unknown's avatar
    gotmaester · Member ·

    okay i give up, the letter b and the letter r between < and >. It doesn’t like that. It suppose to be a line break.

    Anyways, please read what I wrote above.

    Thanks :)

  • Unknown's avatar
    thesacredpath · Member ·

    Yeah, the forum software will not show break tags unless you wrap them in code tags, or use the ` symbol before and after (on the key at top left of keyboard on the ~ key).

    I don’t know that break html will work within a list. You can hold shift and hit return to get a line break instead of a paragraph break.

    I would put a blank paragraph before the title on Oldtown in the left column. You might have to put two. Of course that could actually misalign things at the top of the right column.

    This code works best for text content without lists, otherwise it may be best to stick with what you have now.

  • Unknown's avatar
    gotmaester · Member ·

    yea, I may just do that. But this CSS option definitely has potential. I am sure I will find some other place to use it.

    Thank you very much.

  • Unknown's avatar
    thesacredpath · Member ·

    Yeah, CSS3 keeps getting better and better and I’m continually surprised at what we can not do that a mere 3 years ago we couldn’t even think of.

  • The topic ‘Creating two column layout in body’ is closed to new replies.