CSS layout: when boxes no longer fit

Higher Computing Science: Web design and development

Layout questions come up in every Higher web section. The 2025 examiners' report singled out two: working out why floated boxes no longer fit side by side, and when an element needs clear: both.

The space a box takes

The width property sets the width of the content only. The space a box takes across the page is its width, plus its left and right padding, plus any border, plus its left and right margin.

#wrap { width: 960px; }
.col  { float: left; width: 300px; padding: 10px; margin: 0 5px; }

Each column takes 300 + 10 + 10 + 5 + 5 = 330px. Three of them need 990px, which is more than 960px, so the third column drops below the first two.

The fix is to make the columns narrower: with width: 290px, each takes 320px, and three take exactly 960px.

The element that slides up

footer { clear: both; }

Floated elements are taken out of the normal flow, so the next element moves up beside them. If the footer should sit below the floated columns, as the wireframe shows, it needs clear: both.

Where the marks are

Show the sum: each box's width + padding (both sides) + margin (both sides), times the number of boxes, against the container's width.
Say what happens in terms of the page: "the third column drops below the first two".
Spotting the float is the first step; clear is the fix for an element that should be below floated ones.
Margins add space outside the border, padding inside. Two neighbouring floated boxes with 10px margins have 20px between them.

Try two exam-style questions

Choose an answer, say how sure you are, then press Check. Every wrong answer tells you why it is wrong.

The full course covers every topic like this. Every topic in Higher Computing Science has a short note, and a practice quiz with feedback on every answer, plus coding lessons in Python, SQL and HTML, a full mock exam and a progress report for parents.

Create an account Try more for free About the course

More guides

This site is independent: it is not connected to the SQA or Qualifications Scotland. Points from the examiners' course reports are given in our own words.