Nested Div position problem

Discussion in 'CSS' started by zeezdk, Jul 25, 2007.

0
  1. #1
    Hi all,
    I'm quite new to Html and Css

    so i hope some one can help me.

    the problem is pretty simple. i have a large div box ( a container)
    And inside this i have 3 smaller Div boxes. i try to position them using absolute position, thinking that since they are inside the container code wise, the upper left corner of the container would be (0,0). my problem is that when i run the page the positioned box is moved outside the container.
    what am i doing wrong?
    i have listed the body of my html and the id of a single div. hopes this is sufficient. using dtd strict
    <!--HTML-->
    <body>
    <div id="main">
    <div id="Logo"></div>
    <div id="Menu"></div>
    <div id="Content"></div>

    </div>
    </body>

    <!-- CSS-->
    #Content
    {
    height:299px;
    width:100px;
    background-color:red;
    position: absolute;
    right: 10px;
    top: 120px;

    }
     
    zeezdk, Jul 25, 2007 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Well, for starters you are trying to use absolute positioning instead of float/flow order.

    What I THINK your actual 'problem' is relates to that absolute positioned elements are 'removed from flow' - meaning that as far as the container they are in 'source-wise' is concerned they do not exist for determining the dimensions.
     
    deathshadow, Jul 25, 2007 IP
  3. deques

    deques Peon

    Messages:
    206
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #3
    you are trying to absolute position the child elements within the parent element, right?

    first do this in the main

    #main {position: relative}

    then you can absolute position anything within the parent element
     
    deques, Jul 25, 2007 IP