CODEWITHSUNDEEP
htmlcss
TommySun
TommySun

Reputation: 57

What does CSS width 100% actually means for block element?

I want to right-align my navigation links for my resume, courses and contact. and I've heard that the ul elements are block elements so they will automatically inherit the width of the parent(navigation element). However, if I added width:100% to my "right" class,the webpage is different from if I don't add wid:100%. That's why I'm confused on what's width:100% means and how it works. I've searched everywhere and no great help. Thank you for the answers!

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: white;
    font-family: sans-serif;
}
nav{
    background-color:#333333;
    list-style-type: none;
    margin: 0;
    color:whitesmoke;
    font-weight: 900px;
    display: flex;
    justify-content: space-between;
    align-items:baseline;
    pointer-events: none;
}

.name{
    font-family: Helvetica, Arial, Sans-Serif;
    font-weight: 900;
    width:100%;
    text-align: center;
}
nav h3.name{
    padding-top: 25px;
    font-size:30px;
    position: absolute;
}

.right{
    width:100%;
    text-align: right;
}
.left{
    width:100%;
    text-align: left;
}

 

nav ul li {
    padding:30px;
    display: inline-block;
    font-size: 20px;
    pointer-events:auto ;
}
li a{
    text-decoration:none;
    color:rgb(233, 227, 227);
}

a:hover{
    background-color:black;
}
<!DOCTYPE html>
<html>
<head>
    <title> Mingtao Sun's Personal Website　</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
</html>
<body>
    <nav>
        <h3 class="name">Mingtao Sun</h3>
        <ul class="right"> 
            <li><a href="#Resume">Resume </a></li>
            <li><a href="#Courses">Courses</a></li>
            <li><a href="#Contact">Contact</a></li>
        </ul>
    </nav>
    <div class="Introduction">
        <img id="tommy" src="https://media.licdn.com/dms/image/C5603AQEFafZbK6stfQ/profile-displayphoto-shrink_200_200/0?e=1582761600&v=beta&t=vbVZmd2KBWIuYo6Ovybm1p8bJsu06D7s6wpF-j5FwvM">
        <span class="name"> Mingtao Sun </span>
    </div>
</body>

Upvotes: 0

Views: 939

Answers (2)

Alohci
Alohci

Reputation: 82976

... block elements so they will automatically inherit the width of the parent

"inherit" is not the right term here. "consume" would be better. It's only true of its content area when its margins, paddings and borders sum to zero width, but that would be the case for your ul element if it wasn't for the fact that your ul element is a flex item.

Flex items are not block level elements and therefore the rule about automatically consuming the width of the parent by default does not apply. Since the ul element is the only non-absolute positioned item on the main axis, you can make it consume the width of the parent either by (a) making it 100% width as you have done, (b) by setting flex-basis to 100%, or (c) by setting flex-grow to a value greater than or equal to 1.

Upvotes: 1

Emmy
Emmy

Reputation: 89

You have a few things going on here but first I will explain the width and what 100% means. The width of an item is naturally the width of the content. When you set the width to 100%, that means it will be 100% of its parent container. Since you don't have a static width applied to the nav or body, it will default to the screen width.

A ul is a block element. The reason that your header is overlapping though is due to setting position of the 'nav h3.name' to absolute. Changing an element to having an absolute position removes the element from the page's natural flow. This means that the ul will be positioned in the same location at the top of its parent element because it is the first relatively positioned element inside.

If you remove the absolute positioning from the h3 and set the ul's width to 100%, then I think that you will achieve the look that you are going for.

Upvotes: 2

Related Questions