CODEWITHSUNDEEP
htmlcss
user5228393
user5228393

Reputation:

HTML Width Percentage

#wrapper {
        margin: 0 auto;
        max-width: 1020px;
        width: 98%;
        background-color: #FEFBE8;
        border: 2px solid #878E63;
        border-radius: 2px;
        box-shadow: 0 0 10px rgba(12,3,25,0.8);
}

I am following this tutorial online and it has a div element with the id wrapper which wraps everything that is containing in the body. So:

<body>
<div id="wrapper">
...
</div>
</body>

It is a tutorial in making a responsive website. I am a little confused on why for the css of the wrapper he includes max-width: 1020px AND width: 98%. So is this saying that the div element with the id wrapper will be 98% of 1020px?

Upvotes: 2

Views: 9584

Answers (2)

www139
www139

Reputation: 5237

  • max-width -- the maximum width an element can reach
  • width the width of the element

Your code indicates that the #wrapper is to be 98% of the viewport but it should never be wider than 1080px. If 98% of the window width is greater than 1020px, the #wrapper will not get any wider!

Please comment if you don't understand :)

Upvotes: 1

Noam Hacker
Noam Hacker

Reputation: 4835

the width attribute is relative to your browser window's width, but by setting a maximum, this ensures that the width will not exceed 1020px (in this case) even if your browser window gets stretched to over 1020px

Upvotes: 1

Related Questions