🔲 (project) HTML/CSS formatting is making text...overlap

Soo I’m pretty excited because I’m creating a webpage! :no_mouth: Currently, I have the navigation bar done, and started writing some “dummy” text…

But the problem is, how can I have the “About” heading and all the paragraph text after it show underneath the “SOLO” logo-button on the top left? Here is a visual to help!

Some other things that might be helpful to know…

  • The “SOLO” text on the top left is actually a button, and is referenced by the #home-solo ID
  • The buttons on the top right (light purple background) are all under one class, ie. .nav-page
  • .nav-tab is another class, but given to each individual button instead of the whole group
  • The “SOLO” button on the left is not grouped together with the four buttons on the right (I highlighted the two groups’ background in black in case that makes more sense!)
  • …it might also be worth noting that the only “code” after the last line you see in the image is a closing bracket (ie. })

If anyone has any suggestions or resources I can refer to, I’d really appreciate it! :blush:

Hi there!

The issue you are finding will likely be occurring because the button is placed using “float”. Float can be tricky to work with as it makes elements work in annoying ways you need to account for (personally I prefer to use flex or grid) however it does have it’s uses for sure!

The best way I could suggest doing this is by “clearing” the float for the text section. So wrap your text in a div and then clear the float on the text. So for example:

HTML

<div class='article-content'>
   <!-- Your About text here!! -->
</div>

CSS

.article-content {
   clear: left;
}

See this codepen for what it would look like. Feel free to ask if you have any other questions!

Hi @adamgaffney96, thank you so much for your suggestion! I will definitely implement your code, and get back to you on if it works!