html positioning question, need to position sections

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>

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)

Detailed Positioning, However, when more strict control is needed, elements may be positioned using an element's position is dependent on the other elements positioned around it. The most popular problem involves a parent element that contains numerous� position: fixed; An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element. A fixed element does not leave a gap in the page where it would normally have been located.

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>

Positioning in CSS, Most of the work we have done with CSS is fairly simple: changing fonts, colours, (and later CSS properties in this topic), we will use an HTML page structured like this: In the above example, you can see that the second section starts while the You can see the problem with position : as soon as you start positioning� Absolute positioning allows you to position an item wherever you want on the page, to the nearest pixel. Fixed positioning is similar to absolute positioning but the item will remain visible even if you go further down the page. Relative positioning allows a block to be offset relative to its normal position.

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>

Positioning, What if you want to slightly alter the position of some boxes inside a layout There are a number of different types of positioning that you can put into effect on HTML elements. set up for future sections, first add a class of positioned to the second <p> in the HTML: Further resources; Common questions. The element is positioned based on the user's scroll position A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). Note: Not supported in IE/Edge 15 or earlier. Supported in Safari

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>

CSS Positioning - MDN Web Docs, The position CSS property sets how an element is positioned in a MDN community � Report a content problem � Report an issue Jump to section Most of the time, absolutely positioned elements that have height and HTML. < h1>Absolute positioning</h1> <p>I am a basic block level element. When using CSS positioning, the first thing you need to do is establish the CSS property for the position to tell the browser whether you're going to use absolute or relative positioning for a given element. You also need to understand the difference between these two positioning properties.

Adding on from Sven's answer, simply add 'float: left;' to .myClass, and assign the class to the appropriate section elements:

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

How to use CSS position to layout a website (with example code), Using CSS position to layout elements on your website can be hard to figure Click here to visit our frequently asked questions about HTML5 video. Position: static is the default value that an element will have. (This will come into play a bit later on with absolute positioning.) Here's the HTML for that: Greetings, I have a report with all of the required data, but am having trouble with the positioning of the elements. The report has header-like, body and footer-like sections but I am forced [I think] into using only the body section of the report since SSRS won't let me put fields in the header/footer area (msg: fields cannot be used in headers or footers).

CSS - Positioning, You can put any HTML element at whatever location you like. You can specify whether you want the element positioned relative to its natural position in the page� By Jeff Delaney. Created Jan 29, 2019. Last Updated Jan 29, 2019. Slack. #dart #flutter #css. The addition of Flexbox to CSS revolutionized the way we position elements on the web. It makes the alignment of elements on a 2D plane automatic and well, flexible. Fortunately, Flutter uses the same principles for aligning widgets with Flex, Column, and Row.

Flexible Layouts with CSS Positioning – A List Apart, I need the team to spend less time on CSS hacking and more time on direct is that the CSS Box Model defines a position:absolute block as absolute relative to its Top and bottom sections contain one relative DIV each, so no problem there . We hand over our HTML, CSS, JavaScript, cross our fingers, and hope they� Go to the NYT article in question and have a look around. Follow the instructions atop the Google Homepage project to set up a Github repository for this project (of course you’ll need to change the title). Create a new HTML document. Think about all the elements on the page and how they are grouped together.

CSS Positioning 101 – A List Apart, The CSS specification offers us five position properties: static , relative If you have three statically positioned elements in your code, they will stack one on top of For the next example, we won't change any CSS, we'll adjust our HTML to move triggers a new stacking context in IE6 which creates another type of problem.

Comments
  • use boostapp for your grid opration
  • jquery and javascript???? irrelevant tags...
  • apologies they were recommended tags and most of my pages have been using java sorry lol
  • they have appeared hlaf the size (thank you!) but one under the other?
  • 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: stackoverflow.com/questions/10698636/…
  • iv ran this but they appear below each other instead of side by side
  • 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)?