Question

I’m trying to figure out how to position a div within a div within another div. Is that even possible? I have seen a few articles on positioning a div within another div and none of them made sense to me. I am somewhat new to CSS and I’m still trying to grasp the concept.

Basically I’m trying to use positioned divs to create a custom table-like effect. I have my main div that is centered on the page 1000px wide and 1200px tall. Then I have another two divs within that one that separates it into left and right columns each 500px wide and 1200px tall. I have gotten that part easily. I am now trying to use another div in the right column to push my text down. On the top I have a picture that is 300px tall and 500px wide. I want the text to be just below the picture.

HTML code:

<div id="mbody" style="position:relative;">    

    <div id="lbody" style="position:absolute;">  

        Some Text

    </div>

    <div id="rbody" style="position:absolute; right:0;">  

        <img src="photo.jpg" height="300" width="500">

        <div style="position:absolute; width:500; height:1200; top:350;">

            Some Text

        </div>

    </div>

</div>

CSS code:

#mbody{
    margin: 0px;
    margin-left:auto;
    margin-right:auto;
    top:-73px;
    border: 2px solid green;
    width: 1000px;
    height:1200px;
    background: black;
    z-index:1;
}
#lbody{
    margin: 0px;
    padding:0px;
    left:0px;
    border:2px solid red;
    width:500px;
    height:1200px;
    background:black;
}
#rbody{
    margin: 0px;
    padding:0px;
    border:2px solid blue;
    width:500px;
    height:1200px;
    background:black;
}

Please keep in mind that I am new to css and still learning. If anyone answers can you please answer in such a way that even a beginner like me can understand. Thanks in advance.

Answer 1

You need to add ‘#’ before all the div id names in your css
eg. #mbody, #lbody, etc.

Only then will the html know that you are assigning values to the divs

Also, to have an image appear above the text on the right column can be achieved by
<img src="photo.jpg" height="300" width="500" style="float:right;">

Also, it usually helps during the design stage to give a background colour in the css
for eg.
#lbody {background:red;}
This will help you see how the css translates on screen.