How to put multiple body element side by side?

Question

I am programming a website for a music festival. How do I make the two body elements below appear side by side?

<body class="date-and-time">
    <p>Located at Sydney Showground.</p>
    <p>Date: 19-24 July 2022</p>
</body>

<body class="stages">
    <p>With a total of 10 unique areas, there's something for everyone at Vaporfest!</p>
</body>

Here is the CSS styling element, if it helps.

.date-and-time {
    width: 960px;
    height: 640px;
}

.stages {
    width: 700px;
    height: 1173px;
}

In HTML there can always be only one body element. If you need to put things side-by-side, try e.g. two `
` elements and then see this: [How to place two divs next to each other?](https://stackoverflow.com/q/5803023/1220550) — Peter B, Mar 16 '22 at 22:49

score 0 · Answer 1 · answered Mar 16 '22 at 22:52

0

you can do something like this with your CSS to make them on them side by side

`.date-and-time {
    width: 960px;
    height: 640px;
    position: absolute;
    top: 10%;
    left: 10%;`

.stages {
        width: 700px;
        height: 1173px;
        position: absolute
       top: 10%;
       left: 15%
    }

answered Mar 16 '22 at 22:52

Saltman112

1

It didnt work for me – Thomas C. Mar 16 '22 at 23:22
No you can't. Two body elements is invalid in HTML. – Rob Mar 17 '22 at 01:40

score 0 · Answer 2 · answered Mar 16 '22 at 23:23

you can't put two bodies in the same html file, better use div or sections, once the two sections use flex-box to align them inside a container.

HTML:

<div class="container">

  <div class="item">
    <p>Located at Sydney Showground.</p>
    <p>Date: 19-24 July 2022</p>
  </div>

  <div class="item">
    <p>With a total of 10 unique areas, there's something for everyone at 
    Vaporfest!</p>
  </div>

</div>

CSS:

     .container { 
        display: flex;
        flex-flow: row;
         }

   .item {
        flex: 1 1 auto
         }

How to put multiple body element side by side?

2 Answers2