FAQ: CSS Display and Positioning - Review: Layout


#1

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!


#2

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.

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

    <div class="answer">
      <h3>Neutral</h3>
    </div>

    <div class="answer">
      <h3>Agree</h3>
    </div>
  </section>

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

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 <menu> '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). -->

Questions

  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: