5 Replies Latest reply: Mar 8, 2013 5:16 AM by TimSPQR RSS

    More elegant ways of positioning divs

    TimSPQR Community Member

      Newbie alert! First posting alert!

      Context: I'm not a professional programmer (in the medical field), but have much experience with Pascal, C++, assembly and HTML.

      Because I don't want to be laughed at, I'd like to do more CSS and move away from tables.

       

      .editorial {Most of the stuff in CSS I understand quickly - just moving programming basics to a different context.

                         But positioning is a major issue. I've played for days on a simple setup and most of them look like Picasso.}

       

      I want to make a simple page as a "template" that can be used throughout a huge website.

      TopLEFTbox - little box for a logo

      TopBAR - horizontal rectangle for a title

      LeftBAR - vertical rectange for navigation

      Subcontainer - a large box into which many different pages will go

       

      I've had to revert to "absolute positioning". It works fine, looks the way I want it to, but if I had to bet, there are more elegant ways that the pros would do this.

      Can you point me in the right direction? (I will never ask for coding  - if you help that's fantastic, but I would never ask for others to do my work).

       

      Here's the code - simple, straightforward, boring:

       

      <!doctype html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>New Login Page</title>
      <link href="../NewLogin.html" type="text/css">

       

      <style>

      body {background-color: #EFEFEF;}

       

      .container {max-width:1260;
                          min-width:780;
                          background-color:#E4E4E4;
                         margin:0 auto;
                         overflow:hidden;
                         width:90%;}

       

      .topleftbox {position:absolute;
                           top:0;
                          left:0;
                          width:50px;
                          height:50px;
                          background-color:#F9FABE;
                          text-align:center;}

       

      .topbar {position: absolute;
                      top: 0px;
                     right: -51px;
                     height: 50px;
                     width: 100%;  
                     background-color: #F9FABE;
                     text-align:center;}

       

      .leftbar {position: absolute;
                     top: 51px;
                     left: 0px;
                    height: 100%;
                    width:50px;
                     background-color: #F9FABE;
                     text-align:center;
                     padding-bottom: 0px;
                    overflow: hidden;}

       

      .subcontainer {position: absolute;
                                 top: 51px;
                                left:51px;
                                height: 100%;
                                width: 100%;
                                text-align:center;
                                background-color: #6FF;}

      </style>
      </head>

       

      <body>

      <div class="container"><!----Major container----------->

       

      <div class="topleftbox"><p>E</p></div>
      <div class="topbar"><p> Top  </p></div>
      <div class="leftbar"><p> Left </p></div>
      <div class="subcontainer"><p> Sub <p></div>
       
      </div><!-------------------------------Major container--->

      </body>
      </html>

        • 1. Re: More elegant ways of positioning divs
          sudarshan.t Community Member

          Tim,

           

          Here's a simple markup along with CSS:

           

          <!doctype html>

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

          <head>

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

          <title>Untitled Document</title>

          <style type="text/css">

          *{

              margin: 0; /*GLOBAL RESET*/

              padding: 0;

              font-family:Verdana, Geneva, sans-serif;

          }

          #container{

              width: 960px; /*Adjust to suit*/

              margin: 0 auto; /*center the page*/

              margin-top: 10px;

              background-color:rgba(255,255,255,1);

          }

          #logo{

              float: left;

              width: 200px;

              border: 1px solid #009;

              padding: 20px;

          }

          #contact{

              float: right;

          }

          small{

              color: #009;

          }

          .clear{

              clear:both;

          }

          #heading{

              margin-top: 10px;

              margin-bottom: 10px;

              color: #fff;

              background-color:rgba(0,0,0,1);

          }

          h1{

              font-size: 32px;

          }

          nav#menu{

              float: left;

              width: 200px;

          }

          li{

              list-style:square;

              line-height:35px;

          }

          li:hover{

              text-decoration:underline;

              color: #009;

              cursor:pointer;

          }

          #contentarea{

              float: right;

              width: 700px;

              border-left: 1px dashed #999999;

              padding-left: 50px;

          }

          p{

              margin-bottom: 20px;

          }

          footer{

              clear: both;

              background-color:rgba(0,0,0,1);

              color: #fff;

              text-align:center;

              font-size:12px;

          }

          </style>

          </head>

           

          <body>

          <div id="container">

              <header>

                  <div id="logo">

                      Logo here

                  </div>

                  <div id="contact">

                      <small>Some contact information can come here</small>

                  </div>

                  <div class="clear"></div>

                  <div id="heading">

                      <h1>Header here</h1>

                  </div>

              </header>

             

              <section id="maincontent">

              <nav id="menu">

                      <ul class="navigation">

                          <li>Item 1</li>

                          <li>Item 2</li>

                          <li>Item 3</li>

                      </ul>

                  </nav>

                  <article id="contentarea">

                      <p>Habent notare legentis et assum processus. Volutpat accumsan hendrerit nulla luptatum volutpat. Nulla suscipit soluta in minim est. In quinta commodo fiant iusto volutpat. Congue sollemnes liber diam vulputate dolor. Doming legentis tation Investigationes feugait minim. </p>

           

          <p>Fiant nisl consectetuer legunt iusto congue. Nobis qui luptatum parum vel facit. Dignissim laoreet sed mutationem ea eleifend. Eodem dolore duis autem iriure velit. Ad accumsan lectorum amet tincidunt sed. Lectores cum eodem nunc iriure tation. </p>

           

          <p>Quis luptatum exerci commodo lectores tation. Feugiat demonstraverunt nibh claritatem feugait praesent. Futurum praesent nulla id molestie hendrerit. Augue humanitatis decima praesent insitam vel. Ex vulputate est delenit eleifend notare. Odio quod parum nostrud amet vel. </p>

           

          <p>Mazim est dolore nihil feugait consequat. Qui clari possim enim facer quod. Zzril facer quis ii lectores humanitatis. Minim in insitam ex facer quod. Vulputate ut habent molestie congue euismod. Eorum quod consequat soluta typi aliquam. </p>

           

          <p>Quam vel nostrud ad iriure non. Soluta anteposuerit nobis est veniam ad. Augue formas dolor eorum facilisis iriure. Iis qui nobis duis euismod consuetudium. Fiant anteposuerit lorem vel eum volutpat. Ut ut aliquip nunc qui lius. </p>

                  </article>

              </section>

              <div class="clear"></div>

              <footer>

                  Your footer here

              </footer>

          </div>

          </body>

          </html>

          • 2. Re: More elegant ways of positioning divs
            sudarshan.t Community Member

            Other than avoiding absolute positioning, this code is very semantic in nature as well. And is pretty self-explanatory. Hope you're able to figure it out

            • 3. Re: More elegant ways of positioning divs
              TimSPQR Community Member

              Thank you VERY very much Sudarshan for taking the time to answer my question.

              This is a superb example of "semantic" code, a word that I've seen quite a bit in my reading about CSS.

              I've spent a few hours on your code and will obviously spend some more.

               

              I note the following:

              1. You spend a huge effort in trying to get as much as possible into the <style></style> section, so I'll work on that in the future.

              2. The use of *{} for global reset I've not seen before, so I'll start using it.

              3. You've used "float" a lot, and I haven't been very successful with it in the past - obviously I need to spend more time studying that one.

              4. I was thinking about adding some "hover" to the code, and you've done it quite simply - excellent!

              5. The use of HTML5 <section></section> and <article></article> tags is interesting - haven't used them before.

               

              So again, thank you very much for your expertise!

              I'll treat your code like a book chapter that will be referred to over and over!

              • 4. Re: More elegant ways of positioning divs
                hans-g. MVP

                Hi Tim,

                 

                only mentioned briefly, here you will find a good range of magnificently drafted templates:

                 

                http://alt-web.com/Free-CSS-Templates.shtml

                 

                Hans-Günter

                • 5. Re: More elegant ways of positioning divs
                  TimSPQR Community Member

                  Those are beautiful!

                  I'll have many great examples of CSS to study.

                  Thank you very much Hans-Günter!