'How to organise text in boxes?

I want to make the following code:

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

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

.setlist {
    width: 800px;
    height: 960px;
    position: absolute;
}

.shop {
    width: 860px;
    height: 600px;
    position: absolute;
}

.booking{
    width: 1200px;
    height: 600px;
}
<body>
    <p class="date-and-time">Located at Sydney Showground.
    Date: 19-24 July 2022</p>
</body>
<body>
    <p class="stages">With a total of 10 unique areas, there's something for everyone at Vaporfest!</p>
</body>
<body>
    <p class="setlist">Over 100 musical acts will be performing at Vapor-fest!</p>
</body>
<body>
    <p class="shop">Official Vaporfest merchandise is now available!</p>
</body>
<body>
    <p class="booking">There are a limited amount of Vaporfest tickets available, so now is the time to book!</p>
</body>

Look like this:

Date and time, stages, setlist, and shop paragraphs organised in an off-centre 4-picture collage. The booking section has its own space

while still maintaining the dimensions.

Thanks

htmlcss


Solution 1:[1]

First off, you should only have 1 body tag for the entire page. Also, I wouldn't set absolute widths and heights to your <p> tags.

You could achieve this with 2 wrapping divs that act as columns, for example something like:

.wrapper {
  height: <whatever height you want here>
}

.left-col {
  float: left;
  width: 60%;
}

.right-col {
  float: right;
  width: 40%;
}

.booking {
  width: 100%;
}
<div class="wrapper">
  <div class="left-col">
    <div class="date-and-time">Located at Sydney Showground. Date: 19-24 July 2022
    </div>
    <div class="setlist">Over 100 musical acts will be performing at Vapor-fest</div>
  </div>
  <div class="right-col">
    <div class="stages">With a total of 10 unique areas, there's something for everyone at Vaporfest!</div>
    <div class="shop">Official Vaporfest merchandise is now available!</div>
  </div>
</div>
<div class="booking">There are a limited amount of Vaporfest tickets available, so now is the time to book!</div>

That should at least get your started.

Solution 2:[2]

You are looking for CSS Grid! Adapt the example below to your needs.

Kevin Powell resource on CSS grid

webdevsimplified resource on CSS Grid

Complete guide to CSS grid by csstricks

body {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 60% 40%;
  grid-template-rows: repeat(8, 1fr);
  margin: 0;
}
p {
  height: 100%;
  margin: 0;
  outline: 1px solid black;
}
.date-and-time {
  grid-row: span 3;
}
.stages {
  grid-row: span 4;
}
.setlist {
  grid-row: span 3;
}
.shop {
  grid-row: span 2;
}
.booking {
  grid-row: span 2;
  grid-column: span 2;
}
<body>
  <p class="date-and-time">Located at Sydney Showground. Date: 19-24 July 2022</p>
  <p class="stages">With a total of 10 unique areas, there's something for everyone at Vaporfest!</p>
  <p class="setlist">Over 100 musical acts will be performing at Vapor-fest!</p>
  <p class="shop">Official Vaporfest merchandise is now available!</p>
  <p class="booking">There are a limited amount of Vaporfest tickets available, so now is the time to book!</p>
</body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Zach Jensz
Solution 2 Zach Jensz

Related Questions