www.webdeveloper.com
Results 1 to 5 of 5

Thread: Absolute Positioning Question...ugh..

  1. #1
    Join Date
    Jan 2007
    Posts
    26

    Absolute Positioning Question...ugh..

    Hi everyone,

    I've been trying to follow along with a CSS training book and have run into some trouble. The author explains how to position two divs side by side using absolute positioning... as:

    html {
    text-align: center;}

    body {
    width: 798px;
    margin: 0px auto;
    position: relative;
    text-align: left;}

    div#content {
    position: relative;
    width: 100%;}

    div#mainData {
    position: absolute;
    width: 50%;
    left: 0;
    }

    div#secondaryData {
    postion: absolute;
    left: 50%;
    width: 50%;
    }

    The HTML looks like this:

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>absolute positioning</title>
    <link href="layout.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
    <div id="content">
    <div id="mainData">
    Test Data 1
    </div>
    <div id="secondaryData">
    Test Data 2
    </div>
    <div id="siteInfo">
    Footer Information
    </div>
    </div>
    </body>
    </html>

    divs "mainData" and "secondaryData" live inside the "content" div. However when I view in any major browser, the two divs just overlap each other. I've been trying this one out for a few days now, so that I can move on! Any help or insight would be appreciated.

    Thanks!

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,463
    Hi there NoAssmblyReqdGA,

    you have a typing error here...
    Code:
    
    div#secondaryData {
    postion: absolute;
    left: 50%;
    width: 50%;
    }
    
    coothead

  3. #3
    Join Date
    Jan 2007
    Posts
    26
    bleh...thanks mate! I think i'm having one of those weeks.

  4. #4
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,463
    Hi there NoAssmblyReqdGA,

    I often miss out the first "i" in position.
    If you make use of the validators...

    ...when you meet a problem, one or other will pick up on typos.

    coothead

  5. #5
    Join Date
    Sep 2008
    Posts
    408
    Indeed coothead, validators rock. All the times it pointed out that I've left renegade tags somewhere! Pretty much anytime something looks 'jacked' the first thing I check out is validation.
    Mullanaphy!
    http://www.mullanaphy.com/

    Unless code is provided or an exact example is requested I think I'm going to start using psuedo code from now on...

    Also, I freelance as well. Inquire within!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles