A responsive site uses a 12-column grid. On a desktop, a sidebar takes 4 columns and the main content takes 8 columns. On a tablet, the developer wants the sidebar to appear above the main content, each taking the full width. Which CSS approach achieves this?

Use a media query at the tablet breakpoint to change the grid template to a single column

Set the sidebar to `width: 100%` and the main content to `width: 100%` globally

Use `flex-direction: column` on all screen sizes

Use `float: none` on the sidebar only

A container ` ` has a floated child element inside it. The container's background color does not extend to cover the floated child, and the container collapses to zero height. Which CSS fix makes the container properly contain the floated child?

Add `position: absolute` to the container

Add `overflow: hidden` to the container

Add `float: left` to the container

Add `clear: both` to the container

A developer needs to build a photo gallery where images are arranged in a 3-column layout, and each row should have equal height regardless of the image aspect ratios. Which CSS layout approach directly supports both the two-dimensional grid and equal-height rows?

`display: inline-block; width: 33.33%`

`display: flex; flex-wrap: wrap`

`display: grid; grid-template-columns: repeat(3, 1fr)`

A two-column layout uses `float: left` on both the sidebar and the main content. The footer that follows appears beside the floated columns instead of below them. The developer cannot modify the HTML. Which CSS-only fix forces the footer to start below both floated columns?

Apply `overflow: hidden` to the footer

Apply `clear: both` to the footer

Apply `float: none` to the footer

Apply `position: relative` to the footer

LPI Web Development Essentials

Domain 3Objective 4

033.4 CSS Box Model and Layout (weight: 2) WEB-DEVELOPMENT-ESSENTIALS Practice Questions (Page 4)

Part of the 033 CSS Content Styling domain, which makes up ~25% of our current practice bank. Linux Professional Institute does not publish an official question count, but from its 60-minute exam (~25–40 total, ~6–10 in this domain), expect 2–3 from this objective — we provide 34 practice questions to prepare you well beyond it. (estimate)

34questions here

7free pages

9concepts

Questions 16–20

16foundation · easy
In the CSS box model, which area is the outermost layer that separates an element from its neighboring elements?
Select an answer first
17application · medium
A responsive site uses a 12-column grid. On a desktop, a sidebar takes 4 columns and the main content takes 8 columns. On a tablet, the developer wants the sidebar to appear above the main content, each taking the full width. Which CSS approach achieves this?
Select an answer first
18application · medium
A container `<div>` has a floated child element inside it. The container's background color does not extend to cover the floated child, and the container collapses to zero height. Which CSS fix makes the container properly contain the floated child?
Select an answer first
19application · medium
A developer needs to build a photo gallery where images are arranged in a 3-column layout, and each row should have equal height regardless of the image aspect ratios. Which CSS layout approach directly supports both the two-dimensional grid and equal-height rows?
Select an answer first
20expert · medium
A two-column layout uses `float: left` on both the sidebar and the main content. The footer that follows appears beside the floated columns instead of below them. The developer cannot modify the HTML. Which CSS-only fix forces the footer to start below both floated columns?
Select an answer first

Finished these 5 questions?

Review the revealed explanations, or continue through the curriculum.

Next 5 questions →Back to WEB-DEVELOPMENT-ESSENTIALS

Free Basic Practice is a study aid with revealable answers — not a scored exam. Examers.io is independent and not affiliated with or endorsed by Linux Professional Institute. “WEB-DEVELOPMENT-ESSENTIALS” is a trademark of its owner, used for identification only.

033.4 CSS Box Model and Layout (weight: 2) WEB-DEVELOPMENT-ESSENTIALS Practice Questions (Page 4)

Questions 16–20

In the CSS box model, which area is the outermost layer that separates an element from its neighboring elements?

A responsive site uses a 12-column grid. On a desktop, a sidebar takes 4 columns and the main content takes 8 columns. On a tablet, the developer wants the sidebar to appear above the main content, each taking the full width. Which CSS approach achieves this?

A container `<div>` has a floated child element inside it. The container's background color does not extend to cover the floated child, and the container collapses to zero height. Which CSS fix makes the container properly contain the floated child?

A developer needs to build a photo gallery where images are arranged in a 3-column layout, and each row should have equal height regardless of the image aspect ratios. Which CSS layout approach directly supports both the two-dimensional grid and equal-height rows?

A two-column layout uses `float: left` on both the sidebar and the main content. The footer that follows appears beside the floated columns instead of below them. The developer cannot modify the HTML. Which CSS-only fix forces the footer to start below both floated columns?

Keep studying — 033 CSS Content Styling