CODEWITHSUNDEEP
htmlcsswidthdivision
Syed Azeem Haider Bukhari
Syed Azeem Haider Bukhari

Reputation: 11

What is the difference between width percentage% and pixels in css

I have created a header and I've given it 100% width size.

Now I am trying to put the text centered in this width by using padding-right and left and how many pixels from left to right or right to left will make it center,

Again my question is how many px is equal to percentage?

If I have given it 100% width then it is equal to how many px?

I am also putting my code below so you can better understand my question

html section:

<header>
    <nav id="logo-menu">
    <nav id="logo">Logo</nav>
    <nav id="menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </nav>
</header>

css:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header{
    height: 80px;
    width: 100%;
    background-color: black;
}

#logo-menu{
    height: 80px;
    width: 80%;
    margin: 0 auto;
    background-color: bisque;
}

#logo{
    height: 80px;
    width: 50%;
    color: black;
    border: 0.1px solid red;
    display: inline-block;
}

#menu{
    height: 80px;
    width: 49%;
    color: black;
    border: 1px solid red;
    display: inline-block;
}

ul{
    list-style: none;
}

li{
    display: inline-block;
}

So basically I am trying to put li items in the middle.

I am a new HTML/CSS learner and need your help guys.

Upvotes: 1

Views: 12830

Answers (1)

Alex 75
Alex 75

Reputation: 3236

About the questions

Pixels (an absolute value) and percentage (a relative value) cannot be derived each other.
Let me explain.
If you use a fixed value like width:250px you will have 250 pixels.
If you use a relative value it will change depending from other values.
width percentage returns a value related to the container.
If your container is 1000px large and you use width: 20%, it results to be 200 pixels. If the container size depends from something else (depending from the screen resolution for example) you will not know how many pixels will be the defined percentage.

To center a child element in a container use: margin: auto
You can specify margin-top/margin-bottom after that if you want to change the vertical position.

See the documentation here: https://developer.mozilla.org/en-US/docs/Web/CSS/width

length

Defines the width as an absolute value.

percentage

Defines the width as a percentage of the containing block's content width. If the width of the containing block depends on the width of the element, the resulting layout is undefined.

About the specific problem

If I understood correctly and you want the "li" elements centered in the (already centered) "ul", this is how I did it: 

#menu ul {
    text-align: center;
}

I used a more specific selector (#menu ul means the UL element child of the element with id="menu") because I don't want this behavior for all the UL eelments in the page.

Upvotes: 3

Related Questions