2 Replies Latest reply: Jul 9, 2012 7:34 AM by JC_Falkor RSS

    Layout Method Suggestions

    JC_Falkor

      I am working on a simple project and would like some feedback on a good method to lay this out. I am new to web design and new to CSS. I have a subscription to Lynda.com and don't mind digging in on the topic. Currently the biggest challenge I am having is understanding how to properly set up the three boxes.

       

      I have thought about a flexible 3 column design but don't know if that's the right path or not. If it is, how do I build up the boxes? If not, what is the best way to do this?

       

      Thanks for the constructive feedback.

       

      DTS-Web-Site-3.0-Layout.jpg

        • 1. Re: Layout Method Suggestions
          Ben Pleysier CommunityMVP

          Try the following

           

          <!doctype html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>Untitled Document</title>
          <style>
          * {
              padding: 0;
              margin: 0;
          }
          html {
              background-color: #FFF;
              font-family: "Arial Black", Gadget, sans-serif;
          }
          body {
              width: 960px;
              margin: 10px auto;
              -webkit-box-shadow: 0 0 5px 5px #CBCBCB;
              box-shadow: 0 0 5px 5px #CBCBCB;
              height: 500px;
          }
          .header {
              height: 250px;
          }
          .article {
          }
          .article .featurebox {
              width: 28%;
              float: left;
              -webkit-box-shadow: 0 0 6px 4px #CBCBCB;
              box-shadow: 0 0 5px 4px #CBCBCB;
              margin-left: 4%;
              font-weight: normal;
              height: 200px;
          }
          .article .featurebox h2 {
              background: #2D426D;
              color: #FFF;
              text-align: center;
              border-bottom: 3px solid #DC4226;
              font-size: 14px;
              line-height: 30px;
          }
          .footer {
          }
          </style>
          </head>
          
          <body>
          <div class="header"></div>
          <div class="article">
              <div class="featurebox">
                <h2>Our Next Class</h2>
              </div>
              <div class="featurebox">
                <h2>eLearning</h2>
              </div>
              <div class="featurebox">
                <h2>Testimonial</h2>
              </div>
          </div>
          <div class="footer"></div>
          </body>
          </html>
          

           

          Gramps

          • 2. Re: Layout Method Suggestions
            JC_Falkor Community Member

            Thank you very much for taking the time to help me on this. Your suggestion should work perfectly.

             

            Much appreciated!