Issue with the Static HTML module

[jkotlowski]

Hi there. So, just getting it out of the way, I sucked at coding. Why I'm trying to run a website is beyond me. lol

I've added a page to my site for affiliates. I wanted to make it look different than your normal buttons and links thing, hoping to make it look more appealing to the eye. For that purpose, I'm using a tabbed container module and then static HTML modules inside it. Within the HTML module, I'm using HTML and CSS (we can use CSS here... Right? I couldn't figure out how to do what I wanted with pure HTML but it all renders?) to create two columns. One for an "about me" section and the other for their own sites.

https://www.t5forums.com/affiliates

This is the page in question. For some reason, the code is messing with the overall site design. There's no space under my site logo now, the search button looks funky, and the size of the user's "messages" and "notification" text at the top of the screen has shrunk. I've been tinkering with removing and changing parts of my code for an hour or so now and I can't figure out what's causing the issues. Below is the awful mess of code I'm trying to work with. Please be nice... lol

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
    box-sizing: border-box;
}

.column {
    float: left;
    padding: 10px;
}

.left {
  width: 35%;
  height: 100%;
}

.right {
  width: 65%;
  height: 100%;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}
</style>

<div class="row">
  <div class="column left" style="background-color:#f2f2f2;">

    <p style="font-size:26px; font-weight: bold; text-align:center;">My Pages</p>

    <p><a href="https://www.youtube.com/channel/UCk776gSQMBKY74yQH_nkjSA">
  <img src="https://static-cdn.jtvnw.net/jtv_user_pictures/panel-211123325-image-af50836f-b567-4f38-9c61-9a51878fd205" alt="MMCupla Youtube" style="width:250px;height:auto;border:0;">
</a>
<br>
<a href="https://www.twitch.tv/mothmageculpa">
  <img src="https://i.imgur.com/zMIO2Ks.jpg" alt="MMCupla Twitch" style="width:250px;height:auto;border:0;">
</a>
<br>
<a href="https://www.facebook.com/MothMageCulpa">
  <img src="https://static-cdn.jtvnw.net/jtv_user_pictures/panel-211123325-image-6e0cf58b-ba5a-47df-a494-9ef1507cfd1e" alt="MMCupla Facebook" style="width:250px;height:auto;border:0;">
</a>
<br>
<a href="https://twitter.com/Mothmageculpa">
  <img src="https://static-cdn.jtvnw.net/jtv_user_pictures/panel-211123325-image-f42859aa-1ca4-490e-954c-5ddbd579e947" alt="MMCupla Twitter" style="width:250px;height:auto;border:0;">
</a></p>
  </div>

  <div class="column right" style="background-color:#4da6ff;">

   <p style="font-size:26px; font-weight: bold; text-align:center;">About Me</p>

    <p><style>
img {
    float: left;
}
</style>


<p><img src="https://i.imgur.com/TFEB6ih.png" alt="MothMageCulpa" style="width:35%;height:auto;margin-right:15px;">
I'm MMCulpa, commonly known as MothMageCulpa.
<br>
<br>
I'm a funky streamer with a hard head and a loud mouth, but I'm a really chill guy. I'm a comic book nerd with a love for all things Green Arrow and Black Canary. I'm also into things like Godzilla (and Mothra), Twilight Zone, Shadow of the Colossus, and much much more. I'm also a big fan of Moths. I'm a well rounded nerd looking to get out there and let my freak flag fly!
<br>
<br>
Join me and help me grow as a streamer and artist!!</p>
  </div>

[glennrocksvb]

Remove the meta tag. You don't need it. The page already has it.

Remove the * box-sizing block. It affects all elements on the page. Or enclose all HTML elements on the module inside a container div with id="affiliates" or some other id, then replace * with #affiliates *

[jkotlowski]

Remove the meta tag. You don't need it. The page already has it.

Remove the * box-sizing block. It affects all elements on the page. Or enclose all HTML elements on the module inside a container div with id="affiliates" or some other id, then replace * with #affiliates *

Like this?

<div id="affiliates">
<style>

#affiliates * {
    box-sizing: border-box;
}

.column {
    float: left;
    padding: 10px;
}

.left {
  width: 35%;
  height: 100%;
}

.right {
  width: 65%;
  height: 100%;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}
</style>

<div class="row">
  <div class="column left" style="background-color:#f2f2f2;">

    <p style="font-size:26px; font-weight: bold; text-align:center;">My Pages</p>

    <p><a href="https://www.youtube.com/channel/UCk776gSQMBKY74yQH_nkjSA">
  <img src="https://static-cdn.jtvnw.net/jtv_user_pictures/panel-211123325-image-af50836f-b567-4f38-9c61-9a51878fd205" alt="MMCupla Youtube" style="width:250px;height:auto;border:0;">
</a>
<br>
<a href="https://www.twitch.tv/mothmageculpa">
  <img src="https://i.imgur.com/zMIO2Ks.jpg" alt="MMCupla Twitch" style="width:250px;height:auto;border:0;">
</a>
<br>
<a href="https://www.facebook.com/MothMageCulpa">
  <img src="https://static-cdn.jtvnw.net/jtv_user_pictures/panel-211123325-image-6e0cf58b-ba5a-47df-a494-9ef1507cfd1e" alt="MMCupla Facebook" style="width:250px;height:auto;border:0;">
</a>
<br>
<a href="https://twitter.com/Mothmageculpa">
  <img src="https://static-cdn.jtvnw.net/jtv_user_pictures/panel-211123325-image-f42859aa-1ca4-490e-954c-5ddbd579e947" alt="MMCupla Twitter" style="width:250px;height:auto;border:0;">
</a></p>
  </div>

  <div class="column right" style="background-color:#4da6ff;">

   <p style="font-size:26px; font-weight: bold; text-align:center;">About Me</p>

    <p><style>
img {
    float: left;
}
</style>


<p><img src="https://i.imgur.com/TFEB6ih.png" alt="MothMageCulpa" style="width:35%;height:auto;margin-right:15px;">
I'm MMCulpa, commonly known as MothMageCulpa.
<br>
<br>
I'm a funky streamer with a hard head and a loud mouth, but I'm a really chill guy. I'm a comic book nerd with a love for all things Green Arrow and Black Canary. I'm also into things like Godzilla (and Mothra), Twilight Zone, Shadow of the Colossus, and much much more. I'm also a big fan of Moths. I'm a well rounded nerd looking to get out there and let my freak flag fly!
<br>
<br>
Join me and help me grow as a streamer and artist!!</p>
  </div>

It seems to have messed some stuff up.

[glennrocksvb]

Did you close the affiliates div with </div>?

[jkotlowski]

Did you close the affiliates div with </div>?

In the module? Yes, I did.

[glennrocksvb]

I don't see it in the code you posted. When you added <div id="affiliates"> there should be a corresponding closing tag </div> at the end.

[jkotlowski]

glennrocksvb I just went and checked, and I've got two </div> tags at the very end of the code. I guess I didn't select it all when I copied and pasted it above. So how the page looks now is with both div closings.

[jkotlowski]

Actually went and added a third div closing tag and it seems to have fixed several of the issues. The only one I see now is the lack of a space between the header and body of the site.

[glennrocksvb]

Paste your code in this HTML formatter tool to make your code readable and see if the tags are properly closed.

https://htmlformatter.com

I notice that you have a very broad CSS rule that affects the whole page.

<style>
img {
    float: left;
}
</style>

That applies to all images on the page. Change it to #affiliates img to only apply it to the images in that module. And it can be moved to the other CSS rules instead of its own style tag.

[jkotlowski]

Paste your code in this HTML formatter tool to make your code readable and see if the tags are properly closed.

https://htmlformatter.com

I notice that you have a very broad CSS rule that affects the whole page.

<style>
img {
float: left;
}
</style>

That applies to all images on the page. Change it to #affiliates img to only apply it to the images in that module. And it can be moved to the other CSS rules instead of its own style tag.

All my tags were closed.

Adding #affiliates to the float code seemed to fix everything. You're a real gem, Glenn. Gonna send a donation to you when I get paid tomorrow. ^_^

[glennrocksvb]

Glad to help!