5 Replies Latest reply: Apr 9, 2013 10:03 PM by ZenDao RSS

    Stacking Div Tags Vertically

    ZenDao Community Member

      I created a few divs using Dreamweaver CS 5.5.

       

      I created a header div, nav div, content div and footer div all contained within a container div. But there is spaces between each section. How do I get them to but against each other without the spaces in between?

       

      Also, when I created a spry navigation bar within the nav div, the spry bar hangs outside the bottom of the nav div. Is there a way to contain it properly or is this a normal behavior? Or maybe I don't need a div for the navigation bar???

        • 1. Re: Stacking Div Tags Vertically
          Nancy O. CommunityMVP

          By default, browsers add margins and padding to every HTML element. If you have unwanted vertical space between divs, try shoring them up with margin:0; padding:0.  Or, use a CSS Reset method.

          http://cssresetr.com/

           

          when I created a spry navigation bar within the nav div, the spry bar hangs outside the bottom of the nav div.

           

          To contain the floats in your menu, apply overflow:hidden to your nav div.

           

          nav {

          overflow:hidden;

          }

           

           

          Nancy O.

          • 2. Re: Stacking Div Tags Vertically
            MurraySummers CommunityMVP

            Actually <div> has no default margin or padding. But the first/last element in a div most likely will. For example, this -

             

            <div style="height:20px;background-color:red;"></div>

            <div style="height:20px;background-color:green;"></div>

             

            will show two contiguous divs, red over green. However, this -

             

            <div style="height:20px;background-color:red;"></div>

            <div style="height:20px;background-color:green;"><p>Yahoo</p></div>

             

            will show a gap between the two divs. That gap is the top margin on the <p> tag that has escaped from the div container. You can easily manage those margins with CSS.

            • 3. Re: Stacking Div Tags Vertically
              ZenDao Community Member

              Thanks for the ideas. I am still having problems removing the extra spaced between the divs. For instance, there is a gap above and below the content div.

               

              And when I added the spry nav to the nav div, there is a gap below it too. I pasted the html and css code below.

               

               

              ------------------------------ HTML---------------------------------

               

              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

              <html xmlns="http://www.w3.org/1999/xhtml">

              <head>

              <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

              <title>Comp Website</title>

              <link href="test.css" rel="stylesheet" type="text/css" />

              <style type="text/css">

              .header {

                        text-align: center;

                        background: #670206;

              }

              </style>

              <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

              <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

              </head>

              <body bgcolor="#FF0033" link="#FF0033" vlink="#990033" alink="#CC0066">

              <div class="container">

                <div class="header"><img src="images/temp_logo.gif" width="189" height="55" alt="sulam logo" /></div>

                <div class="content">

                  <div class="nav">

              <ul id="MenuBar1" class="MenuBarHorizontal">

                <li><a href="#">Home </a>    </li>

                <li><a href="#">About Us</a></li>

                <li><a href="#">Curriculm</a>    </li>

                <li><a href="#">Admissions</a></li>

                <li><a href="#">FAQ</a></li>

                <li><a href="#">Contact Us</a></li>

              </ul>

              <p> </p>

                  </div>

                  <p>Erum eaquiducimi, custrum fugitius enda dolupta spienis int.<br />

                  Ant laceprorem facea non nus andi velibus autemodiam, tectiantio blaccum ipis magnihilique volo blaborum ut faccus aut et et laborum reriatia volupti umenectore enis perunde ndentiis dolorio. Sedi ut fuga. Ebis eum in nia velest, sima qui in exped qui is iduntur?</p>

                  <p>Ebis eosamus dolorio nsentem olorese quatus explign iaecaborios eosam etur, officipsa plabo. Ro mint verorro ressitas experibus et rest, qui qui officia ne doluptatior sitibus.<br />

                    Aceste vendam nonsed mos andist apita ent etur? Totasse experia tisquaernat mo vendelitia venimi, seditiis culparu ptatureperem ut quossun tibearum quiatio. Qui sape volorepe est, sundandebita nesectibea sedis renet evenis sanimus andiscimi, explabori volorrum eiumqui con plab imolori tissitate pratur, sitatem sequunt mint.<br />

                  </p>

                </div>

                <div class="footer"><img src="images/f_logo.jpg" width="40" height="40" alt="facebook" /></div>

              </div>

              <script type="text/javascript">

              var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

              </script>

              </body>

               

               

              </html>

              ------------------------------ CSS----------------------------------

              @charset "UTF-8";

              /* CSS Document */

               

               

              <style type="text/css">

              body,td,th {

                        color: #657504;

              }

              body {

                        background-color: #FFF5E4;

                        background-image: url(images/vectorstock_38606g.gif);

                        margin: 0;

                        padding: 0

              }

              p {

                        color:#657504;

                        line-height:1.8;

                        margin-bottom: 1em;

                        margin-left: 12.5em;

                        margin-right: 12.5em

              }

              h1 {

                        font-size: 1.6em;

                        color: #193742;

                        margin-bottom: .4em;

              }

              h2 {

                        font-size: 1.6em;

                        color: #007138;

                        font-weight: normal;

                        margin-top: 1.2em;

                        margin-bottom: 1em;

              }

              h3 {

                        font-size: 1.3em;

                        color: #51341a;

                        font-weight: normal;

                        margin: 1.25em 0 .5em;

              }

              .container {

                        width: 900px;

                        padding: 0px;

                        background: #ffffff;

                        height: auto;

                        margin: 0px auto;

              }

              </style>

              .content {

                        overflow:hidden;

              }

              .footer {

                        padding: 10px 20px;

                        background: #670206;

              }

              .nav {

                        height: auto;

                        padding: 0px;

                        float: none;

              }

              .content {

                        padding: 0px;

              }

              .footer img {

                        padding: 10px;

              }

              .footer img2 {

                        padding: 10px 10px 10px 0px;

              }

              .header {

                        padding: 0px;

              }

              .container div .nav #MenuBar1 li {

                        font-size: small;

              }

              • 4. Re: Stacking Div Tags Vertically
                MurraySummers CommunityMVP

                You cannot have HTML in a CSS file (I assume that's what you have here) -

                 

                ------------------------------ CSS----------------------------------

                @charset "UTF-8";

                /* CSS Document */

                 

                 

                <style type="text/css">

                body,td,th {

                          color: #657504;

                }

                 

                and here -

                 

                </style>

                .content {

                          overflow:hidden;

                }

                 

                Next, consider this code -

                 

                <ul id="MenuBar1" class="MenuBarHorizontal" style="margin-top:0;margin-bottom:0;">

                  <li><a href="#">Home </a>    </li>

                  <li><a href="#">About Us</a></li>

                  <li><a href="#">Curriculm</a>    </li>

                  <li><a href="#">Admissions</a></li>

                  <li><a href="#">FAQ</a></li>

                  <li><a href="#">Contact Us</a></li>

                </ul>

                <!-- delete the empty paragraph here -->

                    </div>

                    <p style="margin-top:0;">Erum eaquiducimi, custrum fugitius enda dolupta spienis int.<br />

                • 5. Re: Stacking Div Tags Vertically
                  ZenDao Community Member

                  Sorry, I meant to clarify that the html and css are separate. I just cut and paste the text within the same thread. Things are starting to shape up with the div's. Thanks for the help.