title: Hiding specific div elements when resizing window
body: <p>I have written a simple web application with the default web app project in Visual Studio 2012. What I want to do, is to hide two <code>&lt;div&gt;</code> elements when I resize the browser window. How am I able to do that?</p>
  
  <p>CSS</p>
  
  <pre><code>html {
      width: 100%;
      height: 100%;
      min-height: 100%;
  }
  
  
  body {
      background-color: white;
      color: #333;
      font-size: .85em;
      font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
      margin: 0 auto;
      padding: 0;
      height: 100%;
      min-height: 100%;
  }
  
  .bodycontainer {
      background-color: white;
      clear: both;
      padding-top:30px;
      min-height: 100%;
      height: 100%;
      padding-bottom: 30px;
  }
  
  .float-left {
      float: left;
  }
  
  .float-right {
      float: right;
  }
  
  
  header {
      padding-top: 20px; 
      width: 60%;
      margin: 0 auto;
  }
  </code></pre>
  
  <p>Site.master</p>
  
  <pre><code>&lt;%@ Master Language="VB" AutoEventWireup="true" CodeBehind="Site.master.vb" Inherits="app.SiteMaster" %&gt;
  
  &lt;!DOCTYPE html&gt;
  &lt;html lang="it"&gt;
  &lt;head runat="server"&gt;
      &lt;meta charset="utf-8" /&gt;
  
      &lt;link href="content/CustomStyle.css"    rel="stylesheet" type="text/css" /&gt;
      &lt;link href="content/jquery.qtip.css"    rel="stylesheet" type="text/css" /&gt;
  
      &lt;script type="text/javascript" src="Scripts/jquery-1.10.2.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="Scripts/jquery.qtip.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="Scripts/jquery.floatThead.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="Scripts/jquery.tablesorter.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="Scripts/jquery.tablesorter.widgets.js"&gt;&lt;/script&gt;
  
      &lt;title&gt;&lt;%: Page.Title %&gt; - Methodo&lt;/title&gt;
  
      &lt;asp:PlaceHolder runat="server"&gt;        
          &lt;%: Scripts.Render("~/bundles/modernizr") %&gt;
      &lt;/asp:PlaceHolder&gt;
      &lt;webopt:BundleReference runat="server" Path="~/Content/css" /&gt; 
      &lt;asp:ContentPlaceHolder runat="server" ID="HeadContent" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;form runat="server"&gt;
      &lt;asp:ScriptManager runat="server"&gt;
          &lt;Scripts&gt;
              &lt;%--Framework scripts--%&gt;
              &lt;asp:ScriptReference Name="MsAjaxBundle" /&gt;
              &lt;asp:ScriptReference Name="jquery" /&gt;
              &lt;asp:ScriptReference Name="jquery.ui.combined" /&gt;
              &lt;asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" /&gt;
              &lt;asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" /&gt;
              &lt;asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" /&gt;
              &lt;asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" /&gt;
              &lt;asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" /&gt;
              &lt;asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" /&gt;
              &lt;asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" /&gt;
              &lt;asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" /&gt;    
              &lt;asp:ScriptReference Name="WebFormsBundle" /&gt;
              &lt;%--Site scripts--%&gt;
  
          &lt;/Scripts&gt;
      &lt;/asp:ScriptManager&gt;
  
      &lt;script type="text/javascript"&gt;
          function goToLogin() {
              window.location.href = "LoginHandler.new";
              return false;
          }
      &lt;/script&gt;
      &lt;header&gt;
  
              &lt;div class="float-left"&gt;
  
                      &lt;a id="homeLink" runat="server" href="~/"&gt;&lt;img runat="server" src="~/Images/logoFinal.png" /&gt;&lt;/a&gt;
  
              &lt;/div&gt;
  
              &lt;div class="float-right"&gt;
                  &lt;section class="topmenu"&gt;
  
  
                              &lt;ul&gt;
                              &lt;%
                                  If (Session.Item("Logged") = True) Then
                              %&gt;
                                      &lt;li&gt;&lt;a id="dispLink" runat="server" href="~/VerificaDisp.aspx"&gt;Disponibilita'&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a id="commesseLink" runat="server" href="~/GestioneComm.aspx"&gt;Commesse&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a id="goHomeLink" runat="server" href="~/Home.aspx"&gt;Home&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a id="logoutLink" runat="server" href="~/Home.aspx" OnClick="return goToLogin();"&gt;Logout&lt;/a&gt;&lt;/li&gt;
                              &lt;%
                                  Else
                              %&gt; 
                                      &lt;li class="customLi"&gt;&lt;a id="defaultLink" runat="server" href="~/Default.aspx"&gt;Login&lt;/a&gt;&lt;/li&gt;
                              &lt;%
                                  End If  
                              %&gt;
                              &lt;/ul&gt;
  
  
  
                  &lt;/section&gt;     
              &lt;/div&gt;     
      &lt;/header&gt;
  
  
      &lt;div class="bodycontainer"&gt;
          &lt;asp:ContentPlaceHolder runat="server" ID="FeaturedContent" /&gt;
          &lt;asp:ContentPlaceHolder runat="server" ID="MainContent" /&gt; 
      &lt;/div&gt;
  
  
  
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>