Learn HTML and CSS: Width and height

Width, height and overflow

On Joanne's big screen the lines of the news run from left to right, half a metre long. On her phone she has to scroll sideways again. A fixed width never fits everywhere.

Wide, but not too wide

With width you give a box a width: in px, or in % of its parent. A fixed width in px is often too wide on a phone: the box sticks out.

max-width says: never wider than this, but narrower when there's less room. max-width: 40rem keeps lines readable on a big screen and adapts on a phone.

That's why max-width is a block of text's best friend.

style.css

1.news {2  max-width: 24rem;3}

klimzaal.example

Height and overflow

height exists too, but with text it's risky. If there's more text than room, it simply runs out of the box, over whatever is below.

With overflow you say what happens then: visible (the default) lets it run out, hidden cuts it off, and auto gives the box a scrollbar when it's needed.

Usually you leave the height out: then the box grows with its content.

style.css

1.news {2  height: 120px;3  overflow: auto;4}

klimzaal.example

Try it yourself

Never let the main content (main) get wider than 48rem, and give the news block (.news) a height of 160px, with a scrollbar when the text doesn't fit.

1/* Your CSS goes here. */

1<!DOCTYPE html>2<html lang="en">3  <head>4    <title>The Steep Wall climbing centre</title>5    <link rel="stylesheet" href="basis.css">6    <link rel="stylesheet" href="style.css">7  </head>8  <body>9    <header>10      <img src="greep.svg" alt="" width="40" height="40">11      <h1>The Steep Wall</h1>12      <p class="slogan">Climbing centre in Ilkley</p>13      <nav>14        <a href="index.html">Home</a>15        <a href="routes.html">Routes</a>16        <a href="prices.html">Prices</a>17        <a href="lessons.html">Lessons</a>18      </nav>19    </header>20    <main>21      <p class="notice">We're closed on Saturday 12 April for a competition.</p>22      <section class="cards">23        <article class="card">24          <h2>Day pass</h2>25          <p class="price">£14</p>26          <p>Climb all day, for as long as your arms hold out.</p>27          <a class="button" href="buy.html">Buy</a>28        </article>29        <article class="card">30          <h2>Ten-visit pass</h2>31          <p class="price">£120</p>32          <p>Ten visits, valid for a year.</p>33          <a class="button" href="buy.html">Buy</a>34        </article>35      </section>36      <section class="news">37        <h2>News</h2>38        <p>There are twelve new routes in the bouldering room, from green to black.</p>39        <p>There's a beginners' class every Tuesday. We'll lend you climbing shoes.</p>40        <p>On Wednesday afternoons the youth club climbs. Feel free to come and watch.</p>41      </section>42    </main>43    <footer>44      <p>7 Handhold Lane, Ilkley</p>45    </footer>46  </body>47</html>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #eef3ee;5  color: #1f2a24;6}7header {8  padding: 16px;9  background: #2d6a4f;10  color: #ffffff;11}12header h1 {13  margin: 4px 0 0;14}15.slogan {16  margin: 0 0 8px;17}18nav a {19  color: #ffffff;20}21main {22  padding: 0 16px 24px;23}24.notice {25  background-color: #ffe8d6;26}27.card {28  padding: 0 16px;29  background: #ffffff;30}31.price {32  font-size: 1.5rem;33  font-weight: bold;34}35.button {36  background-color: #e76f51;37  color: #ffffff;38  text-decoration: none;39}40.news {41  background: #ffffff;42}43footer {44  padding: 12px 16px;45  background: #1b4332;46  color: #ffffff;47}

klimzaal.example

Ready for more?

The full lesson has 4 exercises, from easy to challenging, with hints, points and a streak you can build.

Start the lesson

Wide, but not too wide

With width you give a box a width: in px, or in % of its parent. A fixed width in px is often too wide on a phone: the box sticks out.

max-width says: never wider than this, but narrower when there's less room. max-width: 40rem keeps lines readable on a big screen and adapts on a phone.

That's why max-width is a block of text's best friend.

style.css

1.news {2  max-width: 24rem;3}

klimzaal.example

Height and overflow

height exists too, but with text it's risky. If there's more text than room, it simply runs out of the box, over whatever is below.

With overflow you say what happens then: visible (the default) lets it run out, hidden cuts it off, and auto gives the box a scrollbar when it's needed.

Usually you leave the height out: then the box grows with its content.

style.css

1.news {2  height: 120px;3  overflow: auto;4}

klimzaal.example

Try it yourself

Never let the main content (main) get wider than 48rem, and give the news block (.news) a height of 160px, with a scrollbar when the text doesn't fit.

1/* Your CSS goes here. */

1<!DOCTYPE html>2<html lang="en">3  <head>4    <title>The Steep Wall climbing centre</title>5    <link rel="stylesheet" href="basis.css">6    <link rel="stylesheet" href="style.css">7  </head>8  <body>9    <header>10      <img src="greep.svg" alt="" width="40" height="40">11      <h1>The Steep Wall</h1>12      <p class="slogan">Climbing centre in Ilkley</p>13      <nav>14        <a href="index.html">Home</a>15        <a href="routes.html">Routes</a>16        <a href="prices.html">Prices</a>17        <a href="lessons.html">Lessons</a>18      </nav>19    </header>20    <main>21      <p class="notice">We're closed on Saturday 12 April for a competition.</p>22      <section class="cards">23        <article class="card">24          <h2>Day pass</h2>25          <p class="price">£14</p>26          <p>Climb all day, for as long as your arms hold out.</p>27          <a class="button" href="buy.html">Buy</a>28        </article>29        <article class="card">30          <h2>Ten-visit pass</h2>31          <p class="price">£120</p>32          <p>Ten visits, valid for a year.</p>33          <a class="button" href="buy.html">Buy</a>34        </article>35      </section>36      <section class="news">37        <h2>News</h2>38        <p>There are twelve new routes in the bouldering room, from green to black.</p>39        <p>There's a beginners' class every Tuesday. We'll lend you climbing shoes.</p>40        <p>On Wednesday afternoons the youth club climbs. Feel free to come and watch.</p>41      </section>42    </main>43    <footer>44      <p>7 Handhold Lane, Ilkley</p>45    </footer>46  </body>47</html>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #eef3ee;5  color: #1f2a24;6}7header {8  padding: 16px;9  background: #2d6a4f;10  color: #ffffff;11}12header h1 {13  margin: 4px 0 0;14}15.slogan {16  margin: 0 0 8px;17}18nav a {19  color: #ffffff;20}21main {22  padding: 0 16px 24px;23}24.notice {25  background-color: #ffe8d6;26}27.card {28  padding: 0 16px;29  background: #ffffff;30}31.price {32  font-size: 1.5rem;33  font-weight: bold;34}35.button {36  background-color: #e76f51;37  color: #ffffff;38  text-decoration: none;39}40.news {41  background: #ffffff;42}43footer {44  padding: 12px 16px;45  background: #1b4332;46  color: #ffffff;47}

klimzaal.example