FAQ: CSS Display and Positioning - Review: Layout


This community-built FAQ covers the “Review: Layout” exercise from the lesson “CSS Display and Positioning”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn CSS

FAQs on the exercise Review: Layout

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

I’ve had a play around with the code for this lesson to explore the use of the position, display and float properties. I’ve ended up with a few questions (see further below) about how I’ve attempted to style the section which includes the survey questions and their answer options. This corresponds to the HTML content originally contained within the 5 <div class="question"> elements, but I’ve now included all of this code within one single <main> parent element.

I’ve included my HTML code for this section below but, first, here’s an overview of my amendments and some of the reasons for them:

Within <main>, I’ve contained each question section (heading and text) and each answer section (the 3 options) within their own <section class="block"> element, because I want to display the answer options alongside each question (rather than beneath). I thought I could achieve this by arranging them across the page as inline blocks. As there are further styling differences between how I need to display the question blocks and the answer blocks (yet uniformity amongst all question blocks and all answer blocks), I have given the question blocks the double class value "block question" and the answer blocks the double class value "block answers". This allows me to display both question blocks and answer blocks as inline blocks, and also create a subdivision to style question blocks differently from answer blocks. I’ve included the relevant CSS below the HTML.

  <section class="block question">
    <h4>Question 1</h4>
    <h2>Question Statement</h2>
  <section class="block answers">
    <div class="answer">

    <div class="answer">

    <div class="answer">

  <!-- continues here with the same code for questions/answers 2-5 -->

body {
  text-align: center;
  margin: 0;

main {
  position: absolute;
  top: 280px;
  left: 110px;
  <!-- This offset position is to account for:
    (i) a fixed navigation menu: width 110px; runs the full length of
        the page on the left; and
    (ii) a fixed 'Welcome' section: height 280px; at the top of the
         page. -->
  z-index: 2;
  <!-- This z-index value allows the <main> 'question and answer'
  section to scroll over the fixed 'Welcome' section. -->
  background-color: white;
  padding: 10px;

.block {
  display: inline-block;
  float: left;

.block.question {
  box-sizing: border-box;
  width: 65%;
  height: 250px;
  padding: 0 10px;

.block.answers {
  box-sizing: border-box;
  width: 35%;
  height: 250px;
  padding: 20px 0 10px 10px;

.answer {
  border: 1px solid #466995;
  margin: 10px;

<!-- In my full CSS, the CSS rule sets for the elements which render the
text for the questions and answers do not contain any additional
declarations affecting box-model dimensions (i.e. there are no 
additional values for margin, padding, border, width or height other 
than those included in the CCS rule sets above). -->


  1. Is my use of double classes correct? Specifically, by having the 2 double classes of "block question" and "block answers" in the HTML, does that mean that I can create CSS rules with (i) selector .block which applies to both of the double classes; and (ii) selector .block.question or block.answers which each apply to just one of the double classes?

  2. Adding the declaration float: left; to the .block selector rule set allowed me to obtain a much better horizontal alignment between the content of each question and its answers (both in their own separate inline block). This really happened by accident, through trial and error, as I was experiencing a lot of difficulty with this before experimenting with float. Why is this? I don’t understand why using float improves the alignment here…

  3. Before adding float, I wasn’t able to enter width % values totalling 100% and still keep 2 blocks ( a question and its three answer options) together horizontally across the page.
    e.g. .block.question {width: 65%;} + .block.answers {width: 35%} resulted in each set of answers being rendered below its question; whereas reducing the % slightly for one of them (say 35% to 30%) worked.
    Purely by chance, when I added the float property (as in the code above) I didn’t have this problem anymore. Why is this?

Apologies, if this isn’t the right place to ask questions which go into so much detail. If it isn’t, could you let me know where would be better, and if I need to set out my queries in a different way e.g. more succintly. Thanks! :+1:


I would like to second @jon_morris in his points, as well as ask another pointed question:

This section of lessons - in particular, the display and position properties - were rather confusing overall. While reviewing the available code I was trying to understand how the “Relative” position operated, and was surprised to see that removing this declaration from the .welcome class indicated to the generated page that this <div> was meant to be at the top of the page, just like the <header>. Is this strictly due to the HTML structure, of which <header> and <div> are not communicating actual structured elements to the browser (such a <p> or <h#>?


In the situation you are querying, is the <header> styled with a fixed position?
(As I’ve altered the code for this lesson, I can’t see what the different elements’ position properties were originally set to.)

If it is fixed, then this element has been removed from the normal flow, and so the <div class="welcome"> will occupy the first position (at the top of the page). Before scrolling, this won’t be visually apparent if the <div> has a relative position which offsets and positions it as if the <header> wasn’t in fact fixed. However, if you remove its relative position (effectively defaulting to static position) it will now appear at the top of the page and overlapping with the <header> (assuming of course that the <header> has been fixed at the top of the page).

static and relative :

  • Position elements within the normal flow, with relative allowing an element’s position to be offset without affecting the position of other elements.

absolute and fixed :

  • In contrast, these remove elements from the normal flow, which in turn affects the position of the other elements.
  • The difference between the two is that a fixed position is not affected by scrolling, whereas an absolute position moves with scrolling.

Check out https://developer.mozilla.org/en-US/docs/Web/CSS/position, especially this section.

I hope that helps to answer your question. However, if your code (and position properties) are different to what I’ve assumed, let me know what you’re working with, and I’ll have another go at an explanation :grinning::+1:

1 Like

How can we know where to use padding and where to use positioning rules


If I wanted to move the footer down a bit, would it be better to give it a position of relative and move it down, or would it be better to add some bottom margin to the 5th .question element by giving it an id or another class

Hey guys. I just finished the broadway challenge project and wanted to challenge myself even more. So I decided to create the broadway website from scratch

Live: https://samyadel.github.io/broadway/
Code: https://github.com/samyadel/broadway

Please tell me how I could improve it. Code wise, I used the w3c validator (markup and CSS) and got no warnings and no errors. So what could I add?