html positioning question, need to position sections

Question

hi so iv been writing html for a website and was wondering if there is anyway someone could help me im trying to get my 2 sections " early history" and " european adoption" side by side above " modern cards " any recommendations? i dont know how to position them like this any help would be greatly appreciated

<!DOCTYPE html>
<html>


<head>
  <title>History</title>
  <link rel="stylesheet" type="text/css" href="../CSS/styles.css">
  <style>
    section {
      margin: 10px
    }
  </style>

</head>

<body>

  <!-- Page Header -->
  <header>
    <img class="imageBannerLeft" src="../images/bannerCardsLeft.png">
    <img class="imageBannerRight" src="../images/bannerCardsRight.png">
    <h1>Playing Cards</h1>

  </header>

  <!-- Navigation Bar -->
  <nav>
    <ul>
      <li><a href="home.html">Home</a></li>
      <li><a href="history.html">History</a></li>
      <li><a href="multi.html">Multi-player</a></li>
      <li><a href="single.html">Single-player</a></li>
      <li><a href="register.html">Free Cards</a></li>
    </ul>
  </nav>

  <!-- The main content of the page -->
  <main>
    <section>
      <h2>Early history</h2>
      <p>The first playing cards are recorded as being invented in China around the 9th century AD by the Tang dynasty author Su E who writes about the card game "leaf" in the text Collection of Miscellanea at Duyang. The text describes Princess Tongchang,
        daughter of Emperor Yizong of Tang, playing leaf in 868AD with members of the family of the princess' husband.</p>
      <p>The mass production of Cards became possible following the invention of wooden printing block technology. Early Chinese packs contained 30 cards with no suits.</p>
      <p>The first cards may have doubled as actual paper currency being both the tools of gaming and the stakes being played for. This is similar to modern trading card games. Using paper money was inconvenient and risky so they were substituted by play
        money known as "money cards".</p>
      <p>The earliest dated instance of a game involving cards with suits and numerals occurred on 17 July 1294.</p>
    </section>

    <section>
      <h2>European Adoption</h2>
      <p>The first four-suited playing cards appeared in Europe in 1365. They are thought to originate from traditional latin decks whose suits included: cups, coins, swords, and polo-sticks. As Polo was not yet a European game, polo sticks became batons
        (or cudgels). Wide use of playing cards is recorded from 1377 onwards.</p>
      <p>Professional card makers in Ulm, Nuremberg, and Augsburg created printed decks. Playing cards even competed with devotional images as the most common uses for woodcuts in this period. These 15th-century playing cards were probably painted.</p>
      <p>The Flemish Hunting Deck, held by the Metropolitan Museum of Art is the oldest complete set of ordinary playing cards made in Europe.</p>
      <p>Cards were adapted in Europe to contain members of the royal court and by the 15th Century French and English packs of 56 cards contain the King, Queen and Knave cards.</p>
    </section>

    <section>
      <img class="imageCardsRight" src="../images/germanPlayingCards.jpg">
      <h2>Modern Cards</h2>
      <p>Contemporary playing cards are grouped into three broad categories based on the suits they use: French, Latin, and Germanic. Latin suits are used in the closely related Spanish and Italian formats. The Swiss-German suits are distinct enough to merit
        their subcategory. Excluding Jokers and Tarot trumps, the French 52-card deck preserves the number of cards in the original Mamluk deck, while Latin and Germanic decks average fewer.</p>
      <p>Within suits, there are regional or national variations called "standard patterns" because they are in the public domain, allowing multiple card manufacturers to copy them. Pattern differences are most easily found in the face cards but the number
        of cards per deck, the use of numeric indices, or even minor shape and arrangement differences of the pips can be used to distinguish them. Some patterns have been around for hundreds of years. Jokers are not part of any pattern as they are a
        relatively recent invention and lack any standardized appearance so each publisher usually puts their own trademarked illustration into their decks. </p>
    </section>



  </main>

  <!-- Page Footer -->
  <footer>
    <p> &copy; Card Foundation <br> 2017 <br> Please provide feedback to: jlongridge@jlinternet.co.uk </p>
  </footer>

</body>

</html>

apologies they were recommended tags and most of my pages have been using java sorry lol — kezza1531, Mar 18 '19 at 10:57

score 1 · Accepted Answer · answered Mar 18 '19 at 10:15

1

Add a class to the first two sections and assign these rules to it:

.myClass {
    display: inline-block;
    width: 50%;
}

This will put them next to each other. Of course, if there are other factors that influence their width, you have to take that into account (and, for example, reduce the width accordingly)

answered Mar 18 '19 at 10:15

Sven

3,204
1
20
28

they have appeared hlaf the size (thank you!) but one under the other? – kezza1531 Mar 18 '19 at 10:21
That's a classic problem: you can either reduce their width (for example 49% if that doesn't bother you), or update the font-size of their parent to 0 and then set it manually on the children. Check this out: https://stackoverflow.com/questions/10698636/css-two-div-width-50-in-one-line-with-line-break-in-file – Sven Mar 18 '19 at 10:27

score 0 · Answer 2 · answered Mar 18 '19 at 10:20

You're looking for something along this lines, I think:

<!DOCTYPE html>
<html>


  <head>
    <title>History</title>
    <style>
      #parent {
        float: left;
      }

      #parent section {
        width: 45%;
        float: left;
        margin:10px
      }

    </style>

  </head>

  <body>

    <!-- Page Header -->
    <header>
      <img class="imageBannerLeft" src="../images/bannerCardsLeft.png">
      <img class="imageBannerRight" src="../images/bannerCardsRight.png">
      <h1>Playing Cards</h1>

    </header>

    <!-- Navigation Bar -->
    <nav>
      <ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="history.html">History</a></li>
        <li><a href="multi.html">Multi-player</a></li>
        <li><a href="single.html">Single-player</a></li>
        <li><a href="register.html">Free Cards</a></li>
      </ul>
    </nav>

    <!-- The main content of the page -->
    <main>

      <section id="parent">
        <section>
          <h2>Early history</h2>
          <p>The first playing cards are recorded as being invented in China around the 9th century AD by the Tang dynasty author Su E who writes about the card game "leaf" in the text Collection of Miscellanea at Duyang. The text describes Princess Tongchang,
            daughter of Emperor Yizong of Tang, playing leaf in 868AD with members of the family of the princess' husband.</p>
          <p>The mass production of Cards became possible following the invention of wooden printing block technology. Early Chinese packs contained 30 cards with no suits.</p>
          <p>The first cards may have doubled as actual paper currency being both the tools of gaming and the stakes being played for. This is similar to modern trading card games. Using paper money was inconvenient and risky so they were substituted by
            play money known as "money cards".</p>
          <p>The earliest dated instance of a game involving cards with suits and numerals occurred on 17 July 1294.</p>
        </section>

        <section>
          <h2>European Adoption</h2>
          <p>The first four-suited playing cards appeared in Europe in 1365. They are thought to originate from traditional latin decks whose suits included: cups, coins, swords, and polo-sticks. As Polo was not yet a European game, polo sticks became batons
            (or cudgels). Wide use of playing cards is recorded from 1377 onwards.</p>
          <p>Professional card makers in Ulm, Nuremberg, and Augsburg created printed decks. Playing cards even competed with devotional images as the most common uses for woodcuts in this period. These 15th-century playing cards were probably painted.</p>
          <p>The Flemish Hunting Deck, held by the Metropolitan Museum of Art is the oldest complete set of ordinary playing cards made in Europe.</p>
          <p>Cards were adapted in Europe to contain members of the royal court and by the 15th Century French and English packs of 56 cards contain the King, Queen and Knave cards.</p>
        </section>

      </section>
      <section>
        <img class="imageCardsRight" src="../images/germanPlayingCards.jpg">
        <h2>Modern Cards</h2>
        <p>Contemporary playing cards are grouped into three broad categories based on the suits they use: French, Latin, and Germanic. Latin suits are used in the closely related Spanish and Italian formats. The Swiss-German suits are distinct enough to
          merit their subcategory. Excluding Jokers and Tarot trumps, the French 52-card deck preserves the number of cards in the original Mamluk deck, while Latin and Germanic decks average fewer.</p>
        <p>Within suits, there are regional or national variations called "standard patterns" because they are in the public domain, allowing multiple card manufacturers to copy them. Pattern differences are most easily found in the face cards but the number
          of cards per deck, the use of numeric indices, or even minor shape and arrangement differences of the pips can be used to distinguish them. Some patterns have been around for hundreds of years. Jokers are not part of any pattern as they are
          a relatively recent invention and lack any standardized appearance so each publisher usually puts their own trademarked illustration into their decks. </p>
      </section>


    </main>

    <!-- Page Footer -->
    <footer>
      <p> &copy; Card Foundation <br> 2017 <br> Please provide feedback to: jlongridge@jlinternet.co.uk </p>
    </footer>

  </body>

</html>

I've wrapped your sections in another section (parent) and just adapted the CSS code a little bit.

I've put width:45% so you can keep your margin:10px. Otherwise I would probably have set width:50%

iv ran this but they appear below each other instead of side by side — kezza1531, Mar 18 '19 at 10:24
Where are you running this? If you run on the SO website, they show up side by side... Do have any other HTML wrapper? Or are you perhaps running this in a smaller screen (like a phone/tablet)? — H. Figueiredo, Mar 18 '19 at 10:26

score 0 · Answer 3 · answered Mar 18 '19 at 10:28

Try using display:flex; on parent div

main {
  display: flex;
  width: 100%;
}

<!DOCTYPE html>
<html>


<head>
  <title>History</title>
  <link rel="stylesheet" type="text/css" href="../CSS/styles.css">


</head>

<body>

  <!-- Page Header -->
  <header>
    <img class="imageBannerLeft" src="../images/bannerCardsLeft.png">
    <img class="imageBannerRight" src="../images/bannerCardsRight.png">
    <h1>Playing Cards</h1>

  </header>

  <!-- Navigation Bar -->
  <nav>
    <ul>
      <li><a href="home.html">Home</a></li>
      <li><a href="history.html">History</a></li>
      <li><a href="multi.html">Multi-player</a></li>
      <li><a href="single.html">Single-player</a></li>
      <li><a href="register.html">Free Cards</a></li>
    </ul>
  </nav>

  <!-- The main content of the page -->
  <main>
    <section>
      <h2>Early history</h2>
      <p>The first playing cards are recorded as being invented in China around the 9th century AD by the Tang dynasty author Su E who writes about the card game "leaf" in the text Collection of Miscellanea at Duyang. The text describes Princess Tongchang,
        daughter of Emperor Yizong of Tang, playing leaf in 868AD with members of the family of the princess' husband.</p>
      <p>The mass production of Cards became possible following the invention of wooden printing block technology. Early Chinese packs contained 30 cards with no suits.</p>
      <p>The first cards may have doubled as actual paper currency being both the tools of gaming and the stakes being played for. This is similar to modern trading card games. Using paper money was inconvenient and risky so they were substituted by play
        money known as "money cards".</p>
      <p>The earliest dated instance of a game involving cards with suits and numerals occurred on 17 July 1294.</p>
    </section>

    <section>
      <h2>European Adoption</h2>
      <p>The first four-suited playing cards appeared in Europe in 1365. They are thought to originate from traditional latin decks whose suits included: cups, coins, swords, and polo-sticks. As Polo was not yet a European game, polo sticks became batons
        (or cudgels). Wide use of playing cards is recorded from 1377 onwards.</p>
      <p>Professional card makers in Ulm, Nuremberg, and Augsburg created printed decks. Playing cards even competed with devotional images as the most common uses for woodcuts in this period. These 15th-century playing cards were probably painted.</p>
      <p>The Flemish Hunting Deck, held by the Metropolitan Museum of Art is the oldest complete set of ordinary playing cards made in Europe.</p>
      <p>Cards were adapted in Europe to contain members of the royal court and by the 15th Century French and English packs of 56 cards contain the King, Queen and Knave cards.</p>
    </section>

 



  </main>
   <section>
      <img class="imageCardsRight" src="../images/germanPlayingCards.jpg">
      <h2>Modern Cards</h2>
      <p>Contemporary playing cards are grouped into three broad categories based on the suits they use: French, Latin, and Germanic. Latin suits are used in the closely related Spanish and Italian formats. The Swiss-German suits are distinct enough to merit
        their subcategory. Excluding Jokers and Tarot trumps, the French 52-card deck preserves the number of cards in the original Mamluk deck, while Latin and Germanic decks average fewer.</p>
      <p>Within suits, there are regional or national variations called "standard patterns" because they are in the public domain, allowing multiple card manufacturers to copy them. Pattern differences are most easily found in the face cards but the number
        of cards per deck, the use of numeric indices, or even minor shape and arrangement differences of the pips can be used to distinguish them. Some patterns have been around for hundreds of years. Jokers are not part of any pattern as they are a
        relatively recent invention and lack any standardized appearance so each publisher usually puts their own trademarked illustration into their decks. </p>
    </section>
  <!-- Page Footer -->
  <footer>
    <p> &copy; Card Foundation <br> 2017 <br> Please provide feedback to: jlongridge@jlinternet.co.uk </p>
  </footer>

</body>

</html>

score 0 · Answer 4 · answered Mar 18 '19 at 10:34

You could also try the css grid. It's very powerful in terms of building complex grid layout.

Documentation

.parentDiv {
  display: grid;
}

.firstChild {
  grid-column: 1;
  background-color: yellow;
}

.secondChild {
  grid-column: 2;
  background-color: lime;
}

<div class="parentDiv">
  <div class="firstChild">
    Column 1
  </div>
  <div class="secondChild">
    Column 2
  </div>
</div>

html positioning question, need to position sections

4 Answers4