I'm trying to make an informative website about the colosseum with buttons to show/hide text. I put some images with align=left so the information is next to it, but the buttons after the images are being re-aligned to. Here is what it currently looks like: image

Here is some of the html:

    <div>
  <div >
    <div  onclick="changeGladiator('Murmillo')">
      Murmillo
    </div>
    <div  onclick="changeGladiator('Retiarus')">
      Retiarus
    </div>
    <div  onclick="changeGladiator('Secutor')">
      Secutor
    </div>
  </div>
  <span id="gladiatorTitle"></span>:
  <div id="gladiatorDescriptions">

    <ul id="murmillo">
      <p>
        <img align="left" src="images/Murmillo.jpg" width="245px" />
        A murmillo typically wears a metal helmet with a stylized fish on the crest, a rectangular shield (scutum),
        and a short sword (gladius). The armor worn by a murmillo is designed to protect the head, torso, and legs,
        and it is made of metal or leather. The murmillo is one of the most popular types of gladiators in ancient
        Rome, and they are often pitted against other types of gladiators, such as the retiarius or secutor.
      </p>
    </ul>
    <ul id="retiarus">
      <p>
        <img align="left" src="images/Retiarius.jpg" width="245px" />
        A retiarius fights using a net, trident, and a small sword called a pugio. Retiarii are often pitted against
        secutores, who are armed with a sword and a shield. The retiarius is lightly armed and wears little armor,
        so they rely on their speed and agility to evade their opponents. Retiarii are also known for their
        distinctive outfits, which include a tunic, a loincloth, and a fish-shaped helmet.
      </p>
    </ul>
    <ul id="secutor">
      <p>
        <img align="left" src="images/secutor.jpg" width="245px" />
        Secutors are heavily armed and trained to fight other gladiators, typically a murmillo or a retiarius. Their
        armor and weaponry are designed to mimic those of a soldier, and they are known for their strong, muscular
        build. They are also characterized by their helmet, which has a narrow opening that limits their vision and
        makes them more reliant on their other senses. The secutor's helmet also has a crest that is shaped like a
        fish, which gives them their name (secutor is Latin for "pursuer").
      </p>
    </ul>
  </div>
</div>
<div>
  <div >
    <div  onclick="changeOther('Snacks')">
      Snacks
    </div>
    <div  onclick="changeOther('Celebrities')">
      Celebrities
    </div>
    <div  onclick="changeOther('Other Events')">
      Other Events
    </div>
  </div>
  <span id="otherTitle"></span>:
  <div id="otherDescriptions">
    <ul id="snacks">
      <li>Olives</li>
      <li> Fruits:
        <ul>
          <li>Figs</li>
          <li>Grapes</li>
          <li>Cherries</li>
          <li>Blackberries</li>
          <li>Peaches</li>
          <li>Plums</li>
          <li>Melons</li>
        </ul>
      </li>

      <li> Nuts:
        <ul>
          <li>Walnuts</li>
          <li>Hazelnuts</li>
          <li>Pine Nuts</li>
        </ul>
      </li>
    </ul>
    <ul id="celebrities">
      <li>Built during the reign of the Flavian emperors</li>
      <li>In construction under Emperor Vespasian's Reign</li>
      <li>Emperor Titus celebrated the opening day with 100 days of glagiatorial games</li>
      <li>Emperor Commodus performed in arena</li>
      
    </ul>
    <ul id="other events">
      <li>Dramas</li>
      <li>Reenactments</li>
      <li>Performances</li>
    </ul>
  </div>
</div>

And the css:

html, body {
  height: 100%;
  width: 100%;
  margin: 0px;
  overflow: hidden;
  overflow-y: scroll;
  background: linear-gradient(125deg, #FFCA00 0%, #FFA000 100%);
}

.title {
  width: 100%;
  background-color: #000000;
  border-radius: 0 0 70px 70px;

  color: white;
  font-size: 5rem;
  text-align: center;
}

.body {
  margin: 50px 10%;
  font-family: Arial, Helvetica, sans-serif;
}

.buttons {
  display: flex;
  position: relative;
  right: 15px;
  column-gap: 31px;
  padding-bottom: 27px;
}

.buttons>* {
  cursor: pointer;
  background: black;
  width: auto;
  display: inline;
  border-radius: 50px 50px 50px 50px;
  padding: 10px;
  color: white;
}

img:not(.title>img){
  padding-right: 25px;
  border-radius: 20px 20px 20px 20px;
}

Any idea on what I could do?

CodePudding user response：

Wrap your divs somehow like this:

<div >
   <div >
      <img src="" alt="">
   </div>
   <div >
      <p>Upper description text</p>
      <div >
         <!-- buttons with the description they are supposed to show -->
      </div>
   </div>
</div>

And then the CSS would be something like this

.container {
   display:flex;
   flex-direction:column;
   /*use those for general layout*/
   /*use the following for some better positioning*/
   justify-content:center; /*to center it horizontaly*/
   align-items:flex-start /*to align items to the top within this container*/
}

/*setting height properties on wrappers might be needed, depends on how much text are goiing to be displaying*/

Try this and let me know.