inline-block

It is possible to create a grid of boxes that fills the browser width and wraps nicely (when the browser is resized), by using the inline-block value of the display property.

by eohlsson

HTML

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>CoTE Year 1 Survey</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <script src="/dotnet/Scripts/jquery-ui-1.11.4.js"></script>
    <script src="/dotnet/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>

    <link rel="stylesheet" type="text/css" href="/css/normalize.css">
    <script type="text/javascript" src="/dotnet/scripts/jquery-ui-1.8.9.js"></script>
    
   <script type="text/javascript">

       $(document).ready(function () {

           $("#save").on("click", function () {
               //alert("In");
               var field_count;
               var fieldnames;
               var fieldvalues;
               var insertparams;

               fieldnames = "";
               fieldvalues = "";
               insertparams = "";

               field_count = 1;

               if ($("#program option:selected").val() != "") {
                   fieldnames = fieldnames + ",licensure_program_id";
                   fieldvalues = fieldvalues + "," + $("#program option:selected").val();
               }

               if ($('input[name=subject_area]:checked').val() != "") {
                   fieldnames = fieldnames + ",subject_area";
                   fieldvalues = fieldvalues + ",'" + $('input[name=subject_area]:checked').val() + "'";
               }

               if ($("#subject_area_comments").val() != "") {
                   fieldnames = fieldnames + ",subject_area_comments";
                   fieldvalues = fieldvalues + ",'" + $("#subject_area_comments").val() + "'";
               }

               if ($("#remain_teaching option:selected").val() != "") {
                   fieldnames = fieldnames + ",remain_teaching";
                  ...

CSS

.main div {}
.question {
    display: inline-block;
    width: 250px;
    height: 175px;
    margin: 10px;
    border: 3px solid #73AD21;  
}

.item {
    border: 3px solid red; 
}