Redoing the layout of my manatee shrine

Help
1

I want the pixel manatee adoption center to sit side-by-side with the manatee poem, in a simple two-column layout that won’t overlap the footer.

Here’s my html:

<body>
   <header class= "broider">Boop! You found my manatee shrine.</header>
   <h1>celebrating our favorite floaty potatoes</h1>
   <main class= "broider">
    <div>
    <div class= "broider pixeltees">
      <img src= "/whitemanaface.png">
      <img src= "/pinkmanaface.png">
      <img src= "/greenmanaface.png">
      <img src= "/bluemanaface.png">
      <img src= "/purplemanaface.png">
      <br>
      <img src= "/excitedmanapink.gif">
      <img src= "/excitedmanateal.gif">
      <img src= "/excitedmanapurpl.gif">
      <img src= "/excitedmanastar.gif">
      <img src= "/silverstarmanatee.gif">
      <br>
      <img src= "manatv.png">
      <p><strong>Manatee Adoption Center!</strong>
      <br>
      Feel free to download, use, and share these pixel manatees.</p>
    </div>
    <div>
      <p>But your Modern Mermaid! good gracious me!<br>
       Who'd be inwiggled away from his tracks<br>
       Or be driven to bung up his ears with wax<br>
       By the wiles and smiles of a manatee?<br>
       A sort of shapeless squab sea-lubber,<br>
       A blundering bulk of leather and blubber,<br>
       Like an overgrown bottle of India-rubber;<br>
       The clumsiest, wobblingest, queerest of creatures,<br>
       With nothing but small gimlet-holes for features.<br>
       <em>This</em> a mermaid? Oh, don't tell me!<br>
       It's simply some sly scientifical spree..."<br>
       <br>
       -from <em>Punch</em> magazine, July 20, 1878
      </p>
     </div> 
    </div>
    <footer>
     <h2 style= "text-align: center">What is a group of manatees called?</h2>
     <p>A group of manatees is called an <em>aggregation</em>... but that word doesn't suit such squishy creatures at all. I propose that we call them a <strong>bubble</strong>, or a <strong>cuddle</strong>, or maybe even a <strong>cozy</strong> of manatees!</p>
     <p>In 2016, I spent the summer of a lifetime caring for Snooty the Manatee. <a href="https://bishopscience.org/remembering-snooty/">Visit his memorial</a>, and put this button on your site to keep his memory alive. <img src= "buttons/snootybutton.png"></p>
     <p>I made an April Fool's Day manatee <a href= "/manateeflyer.png">flyer</a> for the staff area at the public library.</p>
    </footer>
   </main>
    <p>This link will take you <a href="/index.html">home</a>.</p>
  </body>

What’s the simplest way to do this? I’m going to format the manatee graphics adoption center later.

2

On my links page I think I have going on basically what you want?

.div {
    max-width: 500px;
    display: inline-block;
    vertical-align: top;
}

If you’ll have CSS, try using these. (play around with the width as you see fit)

Vertical align (you can set it to “bottom” too) isn’t necessary but it was one of those things that drove me nuts trying to figure out why things looked “weird”

This is how I put it in in your code if you want just HTML:

<body>
   <header class= "broider">Boop! You found my manatee shrine.</header>
   <h1>celebrating our favorite floaty potatoes</h1>
   <main class= "broider">
    <div>
    <div class= "broider pixeltees" style="display:inline-block;max-width:300px;vertical-align:top;">
      <img src= "/whitemanaface.png">
      <img src= "/pinkmanaface.png">
      <img src= "/greenmanaface.png">
      <img src= "/bluemanaface.png">
      <img src= "/purplemanaface.png">
      <br>
      <img src= "/excitedmanapink.gif">
      <img src= "/excitedmanateal.gif">
      <img src= "/excitedmanapurpl.gif">
      <img src= "/excitedmanastar.gif">
      <img src= "/silverstarmanatee.gif">
      <br>
      <img src= "manatv.png">
      <p><strong>Manatee Adoption Center!</strong>
      <br>
      Feel free to download, use, and share these pixel manatees.</p>
    </div>
    <div style="display:inline-block;max-width:300px;vertical-align:top;">
      <p>But your Modern Mermaid! good gracious me!<br>
       Who'd be inwiggled away from his tracks<br>
       Or be driven to bung up his ears with wax<br>
       By the wiles and smiles of a manatee?<br>
       A sort of shapeless squab sea-lubber,<br>
       A blundering bulk of leather and blubber,<br>
       Like an overgrown bottle of India-rubber;<br>
       The clumsiest, wobblingest, queerest of creatures,<br>
       With nothing but small gimlet-holes for features.<br>
       <em>This</em> a mermaid? Oh, don't tell me!<br>
       It's simply some sly scientifical spree..."<br>
       <br>
       -from <em>Punch</em> magazine, July 20, 1878
      </p>
     </div> 
    </div>
    <footer>
     <h2 style= "text-align: center">What is a group of manatees called?</h2>
     <p>A group of manatees is called an <em>aggregation</em>... but that word doesn't suit such squishy creatures at all. I propose that we call them a <strong>bubble</strong>, or a <strong>cuddle</strong>, or maybe even a <strong>cozy</strong> of manatees!</p>
     <p>In 2016, I spent the summer of a lifetime caring for Snooty the Manatee. <a href="https://bishopscience.org/remembering-snooty/">Visit his memorial</a>, and put this button on your site to keep his memory alive. <img src= "buttons/snootybutton.png"></p>
     <p>I made an April Fool's Day manatee <a href= "/manateeflyer.png">flyer</a> for the staff area at the public library.</p>
    </footer>
   </main>
    <p>This link will take you <a href="/index.html">home</a>.</p>
  </body>

Hope something here can help :thumbs_up:

1 Like
3

Thanks! I’ll try it tomorrow.

1 Like