Creating fluid layout for buzzfeed type quiz

HTML & CSS
, ,
1

What I am trying to do is display a dynamically loaded quiz (php/mysql) but now I am at the html/css portion. I am using bootstrap so far just for the basics but I don’t know how to get the answer divs into the four squares or rectangles like in the picture below.
The basic of my code is :

<div class="container">
<div class="form-group">
<p> Question</p>
<div class="answer">Answer 1</div>
<div class="answer">Answer 2</div>
<div class="answer"> Answer 3</div>
<div class="answer"> Answer 4</div>
</div>
</div>

So I want the form group div to be the width of the screen, the answer divs to be about 50% (or 40 whatever is needed to include margins/padding if needed) so that there are two side by side and then another row of 2 side by side. These answer divs need to be fluid and get bigger smaller as the browser resizes and some will have an image in them . I hope this makes sense . I am still a beginner level with css especially layout stuff so I don’t even know where to start adjusting this. Right now All the divs are just one on top of each other in lines and that’s all. Any help or pointers are appreciated!

720×540 28.2 KB

2

First, I wouldn’t use that HTML. You don’t need that many DIVs to do what you want. I’m just thinking aloud here, not testing the HTML but I’d do something more like

<div id="questions">
    <form name="formName" action="url_with_programming_here" method="POST">
        <h2>Write the text of the question here</h2>
        <div class="left_options">
             <p><input type="checkbox" id="answer1"><label for="answer1">Answer 1</label></p>
            <p><input type="checkbox" id="answer2"><label for="answer2">Answer 2</label></p>
        </div>
        <div class="right_options">
          <p><input type="checkbox" id="answer3"><label for="answer3">Answer 3</label></p>
           <p><input type="checkbox" id="answer4"><label for="answer4">Answer 4</label></p>
       </div>
</form>
</div>

Then, you can style your div id=“questions” (general container) with a width of 100% (full width)
The element FORM is a block element, so it will take full width. I used a title for the question itself (H2 because you’d probably put the name of the questionnaire using a H1 type)

Then I used two divs. Some options will be on the left (div left_options) and some other will show on the right (right_options)

Simply set their width to 50% (or 45% to leave some margin) and float them left.

Your CSS could be something like

#questions {width: 100%; margin: 0 auto;} /*this margin is to center the div automatically, just in case*/
.left_options, .right_optiones {width: 45%; float: left;}
2 Likes
3

Thank you that is what I needed and the code worked.