Learn how to create a responsive website that will work on all devices, PC, laptop, tablet, and phone.
Read on how to do it in this tutorial: https://www.w3schools.com/howto/howto_make_a_website.asp
Create a Website from Scratch
Try it yourself here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_make_a_website
Tip: To create a different kind of layout, just change the flex width (but make sure that it adds up to 100%).
Tip: Do you wonder how the @media rule works? Read more about it in our CSS Media Queries chapter.
Tip: To learn more about the Flexible Box Layout Module, read our CSS Flexbox chapter.
What is box-sizing?
You can easily create three floating boxes side by side. However, when you add something that enlarges the width of each box (e.g. padding or borders), the box will break. The
box-sizing property allows us to include the padding and border in the box's total width (and height), making sure that the padding stays inside of the box and that it does not break.
You can read more about the box-sizing property in our CSS Box Sizing Tutorial.