1

I'm trying to create a simple webpage with some links to a few other pages at the top right of the page. I've managed to place the links correctly but then I noticed that the links weren't within the div block as I expected them to be. This is how the webpage looks now

webpage pic1

If you take a look at my css code, you will see that I have given a white bottom border to my div element but all you can see is a white line at the top(above unordered list), meaning my unordered list items that are supposed to be within the div element are instead outside it. I realized that this was because of the float: right property from the links_header class. On removing it, I got the desired behavior from the div element.

webpage pic2

My question is this. How did the float property affect the div element and How can I place my ordered list items on the right side and achieve my desired look? I'm very new to HTML and CSS so forgive me if I made a mistake anywhere.

body
{
    background-color: #171717;
}

.links_header
{
    border-bottom: 2px solid white;
}

.links_list
{
    float: right;
    list-style-type: none;
    margin-top:25px;
}

ul li
{
    display: inline-block;
    padding-top: 20px;
}

.links
{
    font-family: "Helvetica", "Verdana", "Arial";
    text-decoration: none;
    color: white;
    padding: 10px 25px;
    border: 1px solid white;
}

.links:hover
{
    text-decoration: none;
    background-color: white;
    color: #171717;
}
<div class="links_header">
    <ul class="links_list">
        <li><a href="#" class="links">Home</a></li>
        <li><a href="#" class="links">Certifications & Projects</a></li>
        <li><a href="#" class="links">About Me</a></li>
        <li><a href="#" class="links">Contact Me</a></li>
    </ul>
</div>
JGZ
  • 307
  • 1
  • 3
  • 13

1 Answers1

1

Add overflow: hidden to .links_header

body
{
    background-color: #171717;
}

.links_header
{
    border-bottom: 2px solid white;
    overflow: hidden;
}

.links_list
{
    float: right;
    list-style-type: none;
    margin-top:25px;
}

ul li
{
    display: inline-block;
    padding-top: 20px;
}

.links
{
    font-family: "Helvetica", "Verdana", "Arial";
    text-decoration: none;
    color: white;
    padding: 10px 25px;
    border: 1px solid white;
}

.links:hover
{
    text-decoration: none;
    background-color: white;
    color: #171717;
}
<div class="links_header">
    <ul class="links_list">
        <li><a href="#" class="links">Home</a></li>
        <li><a href="#" class="links">Certifications & Projects</a></li>
        <li><a href="#" class="links">About Me</a></li>
        <li><a href="#" class="links">Contact Me</a></li>
    </ul>
</div>
Veter
  • 532
  • 2
  • 10
  • Thanks that solved the problem. I think I understand now why I encountered that problem. – JGZ Aug 11 '21 at 17:04