CODEWITHSUNDEEP
htmlcss
user1517566
user1517566

Reputation: 356

cant successfully nest div within another div

I get this will have been answered elsewhere but Im finding too much noise in the css to understand what is going on. Tutorials have me going in circles - simple question I think; how in the code below do I get the div class='mod' to be contained inside of the div class='body' ? When I try to do this the white div sits outside of and below its intended parent. The container should fill screen dimensions, the sidebar sit to the left of screen at fixed width x screen height, and the mod box inside the body div.

<style>
.container {
    width:100%;
    height:100%;
    background:blue;

}

.sidebar {
    width:300px;
    height:100%;
    background:red;
}

.mod { 
    height:100px; 
    width:100px; 
    background:white; 
    border:1px solid;

}
</style>
<div class="container">
    <div class="sidebar">
    </div>
    <div class="body">
        <div class="mod"></div>
    </div>
</div>

Upvotes: 1

Views: 424

Answers (7)

Gemtastic
Gemtastic

Reputation: 6433

The mod div IS inside of the body div, but body also is wrapped around mod so that you can't "see" it. However, the body element is not positioned next to the side-bar. I recommend you learn how to use your browser's inspection tool to inspect where your elements actually are, their size and so on (there are plenty resources on the internet so I won't teach you how here).

The default behavior for the div element is to place underneath one another, since the sidebar is filling the container, body "overflows" and looks to be displayed underneath container.

If you want divs to appear in line you have to add the css code display: inline-block to the sibling divs that are to be displayed next to one another (in this case sidebar and body). This will place them next to one another as blocks.

As you can see in this fiddle, the mod div is now next to the sidebar. If you inspect the body div you will find that body is now the same length as the sidebar and mod gets placed in the bottom left of body.

If you have a look at this fiddle where I've added the code float: left; to body and it's sibling sidebar you will now see that body instead of sizing to the parent (which is wrapping sidebar) it's now only sizing to its content, mod.

What float does is telling the sibling divs that they are supposed to stay next to the element to the left of it, which in this case breaks the default placement under the sibling div and places it next to it instead.

Upvotes: 0

Shubham Vishnoi
Shubham Vishnoi

Reputation: 11

You didn't provide width to .body class and because you are giving a 100% of height to element and not using float, It's going down. I have made some minor changes to your fiddle code paste this css there:

<style>
.container {
    width:100%;
    height:800px;
    background:blue;
}

.sidebar {
    width:300px;
    height:100%;
    background:red;
    float: left;
}
.body{
    width:300px;
    float: left;
}

.mod { height:100px; width:100px; background:white; border:1px solid;}
</style>

Upvotes: 0

Ininiv
Ininiv

Reputation: 1325

To Keep the two div side by side, add the below css property to the parent div#

.container{
display:flex;
}

Upvotes: 0

Ram
Ram

Reputation: 117

Please try this.

CSS

.container { position:relative; }

.sidebar { position:absolute;}

.mod {left:300px; position:absolute;}

Upvotes: 0

A.M.N.Bandara
A.M.N.Bandara

Reputation: 1508

DIV elements are by default displayed as blocks. So even though you have assigned a width to .sidebar div element, it spreads to the rest of the screen. Either you should use float:left on both .sidebar and .body classes 

   .body
    {
        float: left;
    }
    .sidebar {
      width: 300px;
      height: 100%;
      background: red;
      float: left;
    }

or should add display:inline-block for both of them.

.body
{
   display: inline-block;
}
.sidebar {
  width: 300px;
  height: 100%;
  background: red;
  display: inline-block;
}

Both of these solutions will wrap the the .body element inside it's parent element in two different ways. You need to pick the most appropriate style for you.

Upvotes: 0

Katarzyna Jasik
Katarzyna Jasik

Reputation: 11

In order to put two containers side by side, you need to float them. By default they will always stack one on top of the other.

I've changed a code a bit, because height:100% won't give you the result you want because of lack of content:

<style>
   .container {
    background-color:blue;
    min-height:150px;
}
.sidebar {
    width:300px;
    height:150px;
    background:red;
    float:left;}

.body{float:left;}
.mod { 
    height:100px; 
    width:100px; 
    background:white; 
    border:1px solid;
}
</style>

<div class="container">
<div class="sidebar">&nbsp;
</div>
<div class="body">
    <div class="mod"></div>
</div>

Upvotes: 0

Amit Chhangani
Amit Chhangani

Reputation: 28

Please use the below style. You are missing "float:left". 

<style>
.container {
    width:100%;
    height:100%;
    background:blue;

}

.sidebar {
    width:300px;
    height:100%;
    background:red;
    float:left;
}

.body{
    float:left;
}

.mod { 
    height:100px; 
    width:100px; 
    background:white; 
    border:1px solid;

}

</style>

Upvotes: 1

Related Questions