9 Replies Latest reply: Aug 29, 2013 12:42 PM by iBabs2 RSS

    Trying to learn to code div tag so that i can make 3 columns

    iBabs2 Community Member

      Hello,

       

      I am trying to learn how to work with the code for div's in Dreamweaver.

       

      I have a id for the main container named wrapper that is 900px wide and I have 3 div's inside of it that are just long blocks of type . Each div (#history, #attitudes, #per) is 300px wide with the height falling to accommodate the type. I want then next to each other, and right now they are just one long column with the 3 sections..each have a different background color. Here is the code so far...I am trying to play with the float and positioning but nothing I do works.  In the End, it should just be 3 columns of type next to each other. Each column has one header tag for the topic name and the rest is just using the p body tag. can someone help me get the columns next to one another using the code?

       

      thanks!

      babs

       

       

      #wrapper{

      width:900;

                background-color:#CCCC66;

      }

       

       

       

      #history{

                width:300px;

                height:80px;

                background-color:#FF9999;

      }

       

       

      #attitudes{

                width:300px;

                height:80px;

                background-color:#ccFF99;

       

                }

       

       

      #per {

                background-color:#FFFF99;

                width:300px;

                height:80px;

       

       

                }

       

      Here is an image to see them on top of one another....I jusyt want them side by side.....

      Screen Shot 2013-08-27 at 2.01.48 PM.png

        • 1. Re: Trying to learn to code div tag so that i can make 3 columns
          Nancy O. CommunityMVP

          #wrapper{

               width:900px;

               margin:0 auto;

               background-color:#CCCC66;

               overflow:hidden;  /**float containment**/

          }

           

           

           

          #history,

          #attitudes,

          #per {

               box-sizing: border-box;

               -moz-box-sizing: border-box;

               -webkit-box-sizing: border-box;

               float:left;

               width:33.33%

               min-height:80px;

          }

           

          #history { background-color:#FF9999;}

          #attitudes { background-color:#CCFF99;}

          #per { background-color:#FFFF99;}

           

           

           

          Nancy O.

          • 2. Re: Trying to learn to code div tag so that i can make 3 columns
            iBabs2 Community Member

            Hi Nancy,

             

            thanks for responding!!!

            Ok...here is s snapshot of what that did?  could I be having problems since I am not sure what that moz or webkit is??

             

            any thoughts.....

             

            Screen Shot 2013-08-27 at 2.20.01 PM.png

            • 3. Re: Trying to learn to code div tag so that i can make 3 columns
              Nancy O. CommunityMVP

              Copy & paste this code into a new, blank document in code view.  Save and preview in browsers.

               

               

              <!doctype html>
              <html>
              <head>
              <meta charset="utf-8">
              <title>HTML5 document</title>
              
              <style>
              body {
                  margin:0;
                  padding:0;
                  font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
                  font-size:16px;
              }
              
              #wrapper {
              width: 900px;
              margin: 0 auto;
              background-color: #CCCC66;
              overflow: hidden;  /**float containment**/
              }
              
              /**three columns**/
              #history, #attitudes, #per {
              box-sizing: border-box;
              -moz-box-sizing: border-box;
              -webkit-box-sizing: border-box;
              float: left;
              width: 33.33%;
              min-height: 80px;
              padding:12px;
              }
              
              #history { background-color: #FF9999; }
              #attitudes { background-color: #CCFF99; }
              #per { background-color: #FFFF99; }
              </style>
              </head>
              
              <body>
              <div id="wrapper">
              
              <div id="history">
              <h3>History</h3>
              <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! 
              Maecenas quis velit nisl, volutpat viverra felis. 
              Vestibulum luctus mauris sed sem dapibus luctus. 
              Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
              </div>
              
              <div id="attitudes">
              <h3>Attitudes</h3>
              <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! 
              Maecenas quis velit nisl, volutpat viverra felis. 
              Vestibulum luctus mauris sed sem dapibus luctus. 
              Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
              </div>
              
              <div id="per">
              <h3>Per</h3>
              <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! 
              Maecenas quis velit nisl, volutpat viverra felis. 
              Vestibulum luctus mauris sed sem dapibus luctus. 
              Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
              </div>
              
              <!--end wrapper--></div>
              </body>
              </html>
              

               

              Nancy O.

              • 4. Re: Trying to learn to code div tag so that i can make 3 columns
                iBabs2 Community Member

                Hi Nancy!!

                That worked!!!

                 

                Because of the padding I added width to the wrapper and made the percent 30% wide...I will play with it to even things out...but it doing what I was hoping.

                The code seems the same except its an Internal style sheet.....do you think there was an issue with the linked one????

                 

                thanks so much!!!

                babs

                • 5. Re: Trying to learn to code div tag so that i can make 3 columns
                  Nancy O. CommunityMVP

                  It's possible your HTML and/or linked CSS had errors in it.   Use the W3C validation tools to check your code.

                  CSS - http://jigsaw.w3.org/css-validator/

                  HTML - http://validator.w3.org/

                   

                   

                  Nancy O.

                  • 7. Re: Trying to learn to code div tag so that i can make 3 columns
                    iBabs2 Community Member

                    HI Nancy,

                     

                    I have a question...I have been trying to research this myserlf, but I am not finding any good answers....

                     

                    can you please explain what these 2 lines of code mean?

                     

                    -moz-box-sizing: border-box;

                     

                    -webkit-box-sizing: border-box;

                     

                    thank you!!!!!

                    babs

                    • 8. Re: Trying to learn to code div tag so that i can make 3 columns
                      Nancy O. CommunityMVP

                      Those are browser prefixes for Firefox (mozilla) and Safari (webkit) because the CSS3 specs haven't been fully implemented yet. 

                       

                      If you want to know what box-sizing does, Chris Coyier at CSS Tricks had this to say:

                      http://css-tricks.com/box-sizing/

                       

                       

                       

                      Nancy O.

                      • 9. Re: Trying to learn to code div tag so that i can make 3 columns
                        iBabs2 Community Member

                        Thank you so much

                        Trying to really understand all fo this!!

                        babs