Im coding a single web page using HTML and CSS, and im having a problem with making a new section under my columns

Language Help HTML
1

My first post. Okay, so I am making a web site, and I am working on my first page, and i am coding it with HTML and CSS (not using a website builder). But I am having some real difficulty with the sections. I have made a title and logo, then a header, then drop down menu, but the problem comes after my 3 column structure. Every time I try add a new paragraph, or carousel, or image, or anything after the three columns, it ends up being placed under my 3rd column on the right, instead of being in its own. I want my content to be its own section after the columns. I have a github as I have not yet purchased a domain or hosting. Could anyone help me to have a new body section after the columns please. I did try Google, but I dont know the correct terminology.
here is a link to my github so you can see the page. >> Building muscle at home on a budget
I can post my code, but I will have to post it all as I dont know which part of the code it is where I need to make the fix.

2

Could you post the link to the GitHub code? Without the code, it’s hard to know! Are you using flex-box or grid css?

1 Like
3

Hi there!

Welcome to the forums!

float is so funny to me. My brain skipped over it while learning layouts and went right into flex and grid. :smiley:

However, I did pay enough attention to get the gist. A floated element moves to the right or left of its parent container and allows other elements to “jump up” and fill in any space and wrap around the floated element. From what I can see on your webpage, each column has a width of 31% + 20px in inline-padding. This leaves 93% + 60px in width that the elements below .row can jump up to.

To fix this, you need to use the clear property, which can be applied to the next element. So, for example, if you wanted to create a footer like so:

<div class="row">
  .
  .
  .
</div>
<footer>
  <p> © 2023 </p>
</footer>
<hr>

Instead of looking like this:
image

It can go under like so:
image

In my example I use clear: both; on the footer

1 Like
4

Wow, thank you so much. I have literately been searching for the answers on Google for ages. I fixed it with your help. I couldn’t be happier. Clear property is now forever in my arsenal. :upside_down_face:

1 Like