Skip navigation
Currently Being Moderated

More elegant ways of positioning divs

Mar 7, 2013 5:48 PM

Tags: #css #absolute_positioning

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>

 
Replies
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 7, 2013 9:50 PM   in reply to TimSPQR

    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>

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 7, 2013 9:50 PM   in reply to Sudarshan Thiagarajan

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 8, 2013 5:09 AM   in reply to TimSPQR

    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

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points