How can i apply border for fluid grid layout div

How can i apply border for fluid grid layout div

<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="CSS/Layout.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider();
</script>
<!--
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
  <div id="LayoutDiv1"><img src="SJV-Images/Banners/Dark-green-curved-header.png"/></div>
  <div id="LayoutDiv2">
  <div class="flex-container">
  <div class="flexslider">
    <ul class="slides">
      <li>
        <img src="SJV-Images/Stud1.jpg"/>
      </li>
      <li>
        <img src="SJV-Images/Stud2.jpg" />
      </li>
      <li>
        <img src="SJV-Images/Stud3.jpg" />
      </li>
    </ul>
  </div>
</div> </div>
  <div id="Nav">This is the content for Layout Div Tag "Nav"</div>
  <div id="Special_Features"><h3 align="center">SPECIAL FEATURES</h3>
  <ul>
  <li>
  It is one of the oldest school.</li>
  <li>It was first started as an orphanage for the children of British soldiers, and later moved to its current location.</li>
   <li>Rich in Anglo-Indian tradition dating back to three centuries.</li>
  <li>The campus now has separate buildings within the campus for year 1 to  year 8 (Junior and Sub Junior block) and year 9 to year 12 (Senior and   Super Senior block).</li>
  <li>The school has montessori facilities in a separate building.</li>
  <li>The School also has boarding facilities for students from distant places.</li>
  </ul></div>
  <div id="History"><img src="SJV-Images/His_Image.png" alt="Hisimage" class="floatleft">
  <h3>HISTORY OF OUR SCHOOL</h3><P>In 1750 – a very long time ago,a missionary and a teacher, Christian Frederick Schwartz came to India to work in the Danish Mission at Tranquebar.Due to his own personal charm, genius and integrity, soon he became a trusted envoy to the court of Princes ,both hostile and friendly. He even helped in the training and education of Serfogee Rajah, the adopted son of the Tanjore Raja Tuljagee.</P></div>
<div id="Photo_Gall"><center>
    <strong>PHOTO GALLERY</strong>
</center>
  <p><img src="SJV-Images/Photogall.png" width="174" height="70" class="floatright"/></p>
</div>
  <div id="News_Events"><center>
    <strong>NEWS & EVENTS</strong>
  </center><center>Annual Day<br><center>
    Alumni Meet<br>
    Exam Time Table<br>Parents-Teacher's Meet</center>
  </center>
  <br></div>
  <div id="footer">This is the content for Layout Div Tag "footer"</div>
</div>
</body>
</html>

Similar Messages

  • How can i insert include_once inside fluid grid layout?...

    How can i insert include_once inside fluid grid layout?...

    Hi
    You will have to insert this in code view.
    If it is inside a FG div, select 'split' screen mode, click in the required div in design view and this will highlight the selection in code view.
    PZ

  • How can I apply overheads for expense nature items ?

    hi,
    would someone please suggest how can I apply overheads for expense nature items.
    I am unable to apply overheads from cost management SLA -> Cost Update.

    would somebody please help me...

  • Fluid Grid Layout Div's not snapping correctly?

    Hello, how come my fluid grid layout div's are not snapping correctly?
    Here is a picture:
    As you can see, the div tag "iphone1" is halfway in the other column. Shouldn't it be snapping to the nearest column? My mobile layout snaps perfectly fine but my tablet and desktop do not. Is it because my div tag "iphone1" is in another fluid grid layout tag "main-body"> Can you not place div's inside of div's with id's?
    I would appreciate any help as I am sure I am doing something wrong that can easily be fixed.
    Also, it is possible to change the number of columns you want for each design view after creating the page? For example, I have 20 columns in desktop view, it is possible to change to 16 if I wanted to?
    Thanks in advance!

    Hi dhint4,
    Hope things are working out for you while using new Fluid Grids.
    To answer your question around nesting of elements :
    12.2 upgrade of DW fully supports the Nesting of different fluid elements within other fluid element.
    Infact it also supports insertion of non-fluid(normal) element within fluid elements.
    This was not available in 12.0 release.
    Only caveat while nesting is not to apply same class on both Child and Parent unless the the width of both is 100%.
    Also, it is possible to change the number of columns you want for each design view after creating the page? For example, I have 20 columns in desktop view, it is possible to change to 16 if I wanted to?
    Currently its not possible to change the number of columns on the fly. We already have couple of feature request to support the same.
    Please feel free to add your vote by creating a feature request @ :https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform
    Kindly revert if you have any issues or concerns.
    Cheers,
    Puneet

  • Insert Fluid grid layout div tag pastes CSS

    I am trying to create a new fluid grid layout.  I am able to insert 2 new layout divs, but after that, the "Insert Fluid grid layout div tag" fails.  I am in "split" display, and the code view shows CSS instead of the HTML, and the design view shows a page of  CSS code.
    Control-Z always backs me up to the proper display of code and design, but the CSS file does not contain the definitions for the newly-inserted DIV.
    Before insert:
    After insert:

    Yes.  I created a new site, named as you see, for the files created as I learn the new features in CS6.
    The problem I am seeing is 100% reproducable. The 1st 2 layout divs are inserted correctly, then all after that fail.  After the 2nd screen shot above, a single ^Z will restore the code & display panes.  I have learned that I can quickly switch into editing the CSS file, paste in the definitions for the new div (a pain, but do-able), then I can do all of the other editing, resizing, etc.
    One thing I have not tried, but will, is to remove my custom key-mapping and try this in a standard workspace.

  • Why I am not able to see Fluid Grid Layout Div tag

    Why I am not seeing Fluid Grid Layout Div tag In the Insert Layout menu

    DW CC changed the panels.  If you're working in FGLayouts, DW intuitively inserts the correct Div for you.
    Nancy O.

  • Green highlight when working with Fluid Grid Layout Div tags

    What does the green highlight mean when working in Live view of a Fluid Grid Layout using Fluid Grid Layout Div Tags? Sometimes they show up, but sometimes they don't. I think it has something to do with the width setting but I can't figure out what the rule is or what the highlight indicates.
    Dreamweaver CS6
    Mac OSX 10.8.2
    THANK YOU!!

    Brian McNay wrote:
    the green highlight sometimes disappears when modifying the width property of the div. My question is what does this signify?
    If you change the width of a div manually in Code view or in the CSS styles panel, Dreamweaver ceases to treat it as a fluid grid layout div, and the green highlighting disappears.
    To be treated as a fluid grid layout div, the width must be adjusted by dragging the handles in Design view. Dreamweaver snaps fluid grid layout divs to the grid that is defined when you first create the page, and it calculates the width and margins to many decimal places. If the width and/or margin doesn't match the grid dimensions, the highlighting disappears, and the div is treated as any other div.
    It's not a bug, nor are fluid grid layout divs any different from normal ones. The idea of the grid and the highlighting is to allow you to create a responsive layout according to a hypothetical grid. Once you've created the basic structure, it's best to turn off the visual guides anyway.
    Personally, I think that the implementation of fluid grid layouts in Dreamweaver CS6 leaves a lot to be desired. The basic idea is good, but it's difficult to use if you don't have a solid understanding of CSS.

  • What must i do to get Insert Fluid Grid Layout Div Tag on dreamweaver?

    Why an i not able to get the Insert Fluid Grid Layout Div Tag on dreamweaver?
    I am using Creative Cloud

    Hi Leroy, this post in the Adobe Dreamweaver Team Blog may assist you with the updates to Dreamweaver: http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-dreamweaver.html
    Let me know if you still require assistance.

  • How To Center Fluid Grid Layout Div Tag

    Hello I am remaking my webiste and am new to fluid grid layouts. I am trying to center the images you will see in my website into the middle.
    I can use pixels to center it but it will not be centered for all screen resolutions. What do I have to change in the css rule defintion to center it all out or simply move it to the side?
    WEBISTE: http://auto-republic.com
    CODE: http://pastebin.com/LujvaGek
    Thanks in advance!

    In HTML Code View, line 53 - 56, replace what you have now with this:
    <div class="gridContainer clearfix">
         <div id="LayoutDiv1">
         <p>LAYOUTDIV1 CONTENT GOES HERE<p>
         <!--END LAYOUTDIV1--></div>
         <div id="LayoutDiv2">
         <p>LAYOUTDIV2 CONTENT GOES HERE</p>
         <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('wrecker','','images/wreckerservice/wreckerservice2.gif',1)"><img id="wrecker" src="images/wreckerservice/wreckerservice2.gif"></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('facebook','','images/facebook/facebook2.gif',1)"><img id="facebook" src="http://auto-republic.com/images/facebook/facebook1.gif"></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('askaquestion','','images/askusaquestion/askaquestion2.gif',1)"><img id="askaquestion" src="http://auto-republic.com/images/askusaquestion/askaquestion1.gif"></a>
         <!--END LAYOUTDIV2</div>
    <!--END GRIDCONTAINER--></div>
    Nancy O.

  • How to get 100% width in fluid grid layout CC

    I'm currently getting to grips with dreamweaver's fluid grid layout and cant seem to get a div to go the full 100% width across the screen. Ive created a div outside of the grid container as a non fluid div, and entered in the CSS myself in code view since Dreamweaver doesnt seem to allow you to add a class or ID to non fluid elements in design view. I have done this and all though i thought i had achieved success i noticed when looking closely in live view and when previewed in chrome that there is still a tiny gap between the div and the edge of the screen. Its very small, but its definitely there. Ive enetered width to be 100% and its definitely not simply 100% width of the grid container as its wider. I just cant account for the tiny gap which seems to be about 1 pixel wide. Any ideas whats causing this gap?

    Depending on your project goals, there are plenty of other Responsive Frameworks you can use.
    Foundation Zurb
    http://foundation.zurb.com/templates.php
    Skeleton Boilerplate
    http://www.getskeleton.com/
    Initializr (HTML5 Boilerplate, Responsive or Bootstrap)
    http://www.initializr.com/
    DMX Zone's FREE Bootstrap extension for DW
    http://www.dmxzone.com/go/21759/dmxzone-bootstrap/
    Project Seven's Page Packs (Commercial CSS Templates)
    http://www.projectseven.com/products/templates/index.htm
    Adobe Edge Reflow
    http://tv.adobe.com/watch/adobe-edge-reflow/introduction-to-reflow/
    PS. I don't work for Adobe.  I'm just a product user like you.
    Nancy O.

  • Compare the differences between the "Insert" option for fluid grid layouts in DW CC6 2014 and DW6 CC

    Their are differences in the "Insert" menu for DW CC6 2014 and DW CC6.  Where can I find training to explain the differences between the "Insert" menu particularly regarding insertion of fluid grid layouts?

    I would concentrate on learning the version of Dreamweaver that you want to use and not on learning the differences.
    Incidentally, the versions are CS6 and CC.
    As a personal note, I would suggest trying Bootstrap instead of the Fluid Grid Layouts.

  • How to convert live website to fluid grid layout

    I have an existing live website. How do I convert it to a fluid grid layout?

    Who is Peter?
    Responsive Web Design
    http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
    Introduction to CSS Media Queries
    http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
    CS6 Fluid Grid layouts (17 min video)
    http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
    Creative Cloud 12.2 Enhancements to Fluid Grid Layouts
    http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-dreamweaver.html
    Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6
    http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html
    If you want to support multiple languages, you'll need to build a mirror site with translations.
    Nancy O.

  • Starter Templates for fluid grid layouts.

    Hello, I am watching the video (Learn Dw CC video by David Powers.)  In the video and in the version of Dw CC he is using there are 6 templates for a fluid grid layout but I see none in my version of Dreamweaver CC and I have the latest version? Maybe the ones I see in David Powers version are ones that he has purchased separately? Anyone know?
    For anyone reading this that is interested in Fluid Grid Layouts I would definitely consider purchasing the video as he does a first class job of teaching you.
    Thanks, Imelda.

    To open a starter page, go to File > New > Blank page > HTML > select a layout from 3rd panel . Hit Create.  AFAIK, there are no pre-built templates for FluidGrid Layouts.  You simply use the FGLayouts tool to build your own custom layout for mobile, tablet and desktop devices.
    Nancy O.

  • Design option missing for Fluid Grid layouts (was:In dreamweaver CC, I created a new fluid grid page, but the options to edit the page...)

    Hi, in dreamweaver CC, I created a new fluid grid page, but the options to edit the page are limited to code / split / live. The design optin is missing and I need it to move around the fluid grid to position my elements that I have created.
    Thanks

    Hi Raymi,
    Like Ben suggested, you can vote for the feature using the link provided.  From what I understand, the product team is collecting feedback on the limitations of Live View for FG layouts and improving experience on that front. It would help if you could provide a list of limitations with the current workflow.
    Thanks,
    Preran

  • Using Auto Adjustable Fluid Grid Layout Divs to balance two columns

    I have a header band, two columns and then a footer band in the layout that I'm working on.I have Div on each side that is set to "Auto" for height so that the two column lengths appear to be the same size when they get to the footer band. That is how I envisioned it, in practice, "Auto" only seems to adjust to the text inside the respective divs.
    Something that"hould" be soesy has gotten me banging my head for four days. I thught I had a solution, using "nesting tags" but saw that was not supported.
    Any ideas?

    http://whatwouldwaltdo.businesscatalyst.com/fl0916.html
    Source code:
    <!doctype html>
    <!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
    <!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
    <!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
    <!--[if gt IE 8]><!-->
    <html class="">
    <!--<![endif]-->
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Untitled Document</title>
    <link href="boilerplate.css" rel="stylesheet" type="text/css">
    <link href="/FL916.css" rel="stylesheet" type="text/css">
    <link href="/stylesheets/FL.css" rel="stylesheet" type="text/css">
    <link href="/SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">
    <!--
    To learn more about the conditional comments around the html tags at the top of the file:
    paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
    Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
    * insert the link to your js here
    * remove the link below to the html5shiv
    * add the "no-js" class to the html tags at the top
    * you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
    -->
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="respond.min.js"></script>
    <script src="/SpryAssets/SpryAccordion.js" type="text/javascript"></script>
    </head>
    <body>
    <div class="gridContainer clearfix">
      <div id="bannertop"><img src="/images/Walt w CMS PIN.fw.png" alt="Walt Disney with Disneyland Cast Members (1966)"></div>
      <div id="ticker">This is the content for Layout Div Tag "ticker"</div>
    <div id="blocker">
      <div id="leftcolumn">This is the content for Layout Div Tag "leftcolumn"
          <div id="Accordion1" class="Accordion" tabindex="0">
            <div class="AccordionPanel">
              <div class="AccordionPanelTab">HOME</div>
              <div class="AccordionPanelContent">
              <img src="/images/graphics/pagetitles/toallwhocome.gif" alt="The opening line of Walt Disney's dedication speech at Disneyland, &quot;To all who come to this happy place, welcome ...&quot;" width="192" align="absmiddle">
              </div>
            </div>
            <div class="AccordionPanel">
              <div class="AccordionPanelTab">Pins</div>
              <div class="AccordionPanelContent">
                  <p>Ordering</p>
                  <p>Presenting a Pin</p>
                  <p>Collectors' Corner</p>
                  <p>Why a Pin?</p>
              </div>
            </div>
            <div class="AccordionPanel">
              <div class="AccordionPanelTab">Cast Members</div>
              <div class="AccordionPanelContent">
                  <p>Newest</p>
                  <p>Nominate Your Own</p>
                  <p>Alphabetical</p>
                  <p>By Company/Location</p>
                <p>By WWWD Pin</p>
                <p>Cast Members' Reactions</p>
              </div>
            </div>
            <div class="AccordionPanel">
                  <div class="AccordionPanelTab">Traditions</div>
                <div class="AccordionPanelContent">
                <p>Guests' Traditions</p>
                  <p>Share Your Traditions</p>
                </div>
              </div>
            <div class="AccordionPanel">
                  <div class="AccordionPanelTab">Adventures</div>
                  <div class="AccordionPanelContent">
                <p>Guests' Adventures</p>
                  <p>Share Your Adventures</p></div>
              </div>
            <div class="AccordionPanel">
                  <div class="AccordionPanelTab">City Hall</div>
                  <div class="AccordionPanelContent">
                <p>Waltisms</p>
                <p>The WWWD Story</p>
                  <p>About Us</p>
                  <p>That First Trip</p>
                  <p>About Us</p>
                  <p>Ordering</p>
                  <p>About Us</p>
                  <p>Ordering</p></div>
              </div>
        </div>
        <div id="social">This is the content for Layout Div Tag "social"</div>
        <div id="printer">This is the content for Layout Div Tag "printer"</div>
        <div id="banner"><img src="/images/graphics/reg sidebargraphic.gif" alt="White Mickey head with a circle of stars on a blue field"></div>
      </div>
      <div id="copy">This is the content for Layout Div Tag "copy"<br><br><P> <FONT SIZE="-1" COLOR="#CC0000">Copyright © 2012, 2011, 2010, 2009, 2008, 2007, 2006, 2005, 2004, 2003, 2002 Founder's
                Legacy Inc. </FONT><BR>
                <FONT SIZE="-1" COLOR="#CC0000">What Would Walt Do and WWWD are trademarks
                of Founder's Legacy, Inc.</FONT></P>
              <P><FONT COLOR="#000081" SIZE="-1">Founder's Legacy, Inc. is a member
                of the Disney Store.com Affiliate Network. As such we are authorized
                to display the Disney Store banner on any or all of our webpages.
                Founder's Legacy is also listed with The Disneyland Resort Press &
                Publicity Department, images used are with their permission.</FONT></P>
              <P><FONT COLOR="#000081" SIZE="-1">Founder's Legacy, Inc. is not part
                of The Walt Disney Company. The only other relationship between Founder's
                Legacy, Inc. and The Walt Disney Company is various members of the
                Founder's Legacy Inc.'s Board of Directors and/or their family are
                shareholders in The Walt Disney Company.</FONT><FONT SIZE="-1" COLOR="#CC0000"><BR>
                <BR>
                Additional disclosures for the benefit of insomniacs may be enjoyed
                in our <A HREF="/pages/insomniac.shtml">Insomniac's Delight
      Page & Privacy Policy</A></FONT> </P></div>
      </div>
    <div id="mission"><FONT
                 COLOR="#000081"><B>Our Mission Statement</B></FONT>
          <BLOCKQUOTE>
        <P><FONT color="#D50000" SIZE="+2"><em>To restore Magical Guest experiences through recognizing outstanding Cast Members.</em></FONT></P>
            </div>
    <div id="awards"><table width="100%" border="0" cellpadding="0">
      <tr>
        <TD VALIGN="middle" ALIGN="CENTER"><a href="http://LaughingPlace.com"><img src="/Assets/graphics/Affiliations/LPLogoHighest.gif" width="96" height="82" border="1" alt="LaughingPlace.com"></a></TD>
        <TD VALIGN="middle" ALIGN="CENTER"><img src="/Assets/graphics/Affiliations/seek-button01.gif" width="120" height="80"
                 border="0"></TD>
        <TD WIDTH="1" VALIGN="middle" ALIGN="CENTER"><a href="http://disney.go.com/investors/index.html"><img src="/Assets/graphics/Affiliations/shareholder.gif" width="106" height="48"
                 border="1"></a></TD>
        <TD VALIGN="middle" ALIGN="CENTER"> <img src="/Assets/graphics/Affiliations/safewave.gif" width="78" height="74"
                 border="1"></TD>
        <TD VALIGN="middle" ALIGN="CENTER"><a href="http://wdwig.com/"><img src="/Assets/graphics/Affiliations/125x125allearsnet.gif" width="120" height="120" border="0"></a></TD>
      </tr>
    </table></div>
    <div id="bigbottom"><P> <FONT SIZE="-1" COLOR="#CC0000">Copyright © 2012, 2011, 2010, 2009, 2008, 2007, 2006, 2005, 2004, 2003, 2002 Founder's
                Legacy Inc. </FONT><BR>
                <FONT SIZE="-1" COLOR="#CC0000">What Would Walt Do and WWWD are trademarks
                of Founder's Legacy, Inc.</FONT></P>
              <P><FONT COLOR="#000081" SIZE="-1">Founder's Legacy, Inc. is a member
                of the Disney Store.com Affiliate Network. As such we are authorized
                to display the Disney Store banner on any or all of our webpages.
                Founder's Legacy is also listed with The Disneyland Resort Press &
                Publicity Department, images used are with their permission.</FONT></P>
              <P><FONT COLOR="#000081" SIZE="-1">Founder's Legacy, Inc. is not part
                of The Walt Disney Company. The only other relationship between Founder's
                Legacy, Inc. and The Walt Disney Company is various members of the
                Founder's Legacy Inc.'s Board of Directors and/or their family are
                shareholders in The Walt Disney Company.</FONT><FONT SIZE="-1" COLOR="#CC0000"><BR>
                <BR>
                Additional disclosures for the benefit of insomniacs may be enjoyed
                in our <A HREF="/pages/insomniac.shtml">Insomniac's Delight
      Page & Privacy Policy</A></FONT> </P></div>
    </div>
    <script type="text/javascript">
    var Accordion1 = new Spry.Widget.Accordion("Accordion1");
    </script>
    </body>
    </html>
    Stylesheet:
    @charset "utf-8";
    /* Simple fluid media
       Note: Fluid media requires that you remove the media's height and width attributes from the HTML
       http://www.alistapart.com/articles/fluid-images/
    img, object, embed, video {
        max-width: 100%;
    /* IE 6 does not support max-width so default to width 100% */
    .ie6 img {
        width:100%;
        Dreamweaver Fluid Grid Properties
        dw-num-cols-mobile:        5;
        dw-num-cols-tablet:        8;
        dw-num-cols-desktop:    12;
        dw-gutter-percentage:    25;
        Inspiration from "Responsive Web Design" by Ethan Marcotte
        http://www.alistapart.com/articles/responsive-web-design
        and Golden Grid System by Joni Korpi
        http://goldengridsystem.com/
    /* Mobile Layout: 480px and below. */
    .gridContainer {
        margin-left: auto;
        margin-right: auto;
        width: 87.36%;
        padding-left: 1.82%;
        padding-right: 1.82%;
    #LayoutDiv1 {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #bannertop {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #ticker {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #blocker {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #leftcolumn {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #copy {
        clear: none;
        float: left;
        margin-left: 4.1666%;
        width: auto;
        display: block;
    #leftnav {
        clear: none;
        float: left;
        margin-left: 4.1666%;
        width: 100%;
        display: block;
    #social {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
        text-align: center;
        padding-top: 8px;
        padding-bottom: 8px;
        padding-left: 35px;
    #printer {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #banner {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #mission {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #awards {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #bigbottom {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
    @media only screen and (min-width: 481px) {
    .gridContainer {
        width: 90.675%;
        padding-left: 1.1625%;
        padding-right: 1.1625%;
    #LayoutDiv1 {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #bannertop {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #ticker {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #blocker {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #leftcolumn {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #copy {
        clear: none;
        float: left;
        width: 55%;
        display: block;
        margin: 0%;
    #leftnav {
        clear: none;
        float: left;
        margin-left: 2.5641%;
        width: 100%;
        display: block;
    #social {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #printer {
        clear: both;
        float: left;
        margin-left: 0;
        width: 35.8974%;
        display: block;
    #banner {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #mission {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #awards {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #bigbottom {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    /* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */
    @media only screen and (min-width: 769px) {
    .gridContainer {
        width: 88.5%;
        max-width: 1232px;
        padding-left: 0.75%;
        padding-right: 0.75%;
        margin: auto;
    #LayoutDiv1 {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #bannertop {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #ticker {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #blocker {
        clear: both;
        float: left;
        margin-left: 0;
        width: 74.5762%;
        display: block;
        border-top-width: thick;
        border-right-width: thick;
        border-bottom-width: thick;
        border-left-width: thick;
        border-top-style: none;
        border-right-style: ridge;
        border-bottom-style: none;
        border-left-style: none;
        border-top-color: #C10B0F;
        border-right-color: #C10B0F;
        border-bottom-color: #C10B0F;
        border-left-color: #C10B0F;
    #leftcolumn {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #copy {
        clear: none;
        float: left;
        margin-left: 1.6949%;
        width: 100%;
        display: block;
    #leftnav {
        clear: none;
        float: left;
        margin-left: 1.6949%;
        width: 100%;
        display: block;
    #social {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #printer {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #banner {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #mission {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #awards {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #bigbottom {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;

Maybe you are looking for

  • Why did this happen? wifi password problem

    I would be grateful if anyone could enlighten me. Yesterday I spent some fruitless hours trying to set up my airport express to join my wifi network. (DGND3700 Simultaneous dual band 2.4GHz & 5GHz) After a few failed attempts I tried establishing a c

  • Ios 8.1.3 wont download in my iphone 5

    I've been struggling for weeks now. first, apps wont download and update. so when i checked the web for solutions, some say that i need to update to 8.1.3, iphone's currently running 8.1.2. but when i tried to download it in my iphone, it shows updat

  • I am always prompted to type in a "login" Keychain right after logging onto the computer. How do I disable this?

    I've found Keychain Access in the Utilities folder but I can't seem to turn it off.

  • ADC (Additional custom duty)

    Hi all, I am facing one issue regarding additional custom duty at the time of import procurement. my client is in trading business and do not take any modvat of custom duty,counterveiling duty and all so that i had not maintained any CIN setting. But

  • Bridge in CS5 does not recognize card reader

    Help!  Suddenly, my Bridge in Photoshop CS5 does not recognize my card reader.  I have a HP Pavilion Elite HPE that has the card readers (for 15 different cards) built into it and all of a sudden it will not recognize the card reader drive.  I have u