Hi there,

 

how can I make a #wrapper inside another #wrapper? What does the command look like?

 

Regards, Nicklas!

Hi there,

 

how can I make a #wrapper inside another #wrapper? What does the command look like?

 

Regards, Nicklas!

it's probably much simpler than you think. Try this:

<div id="mainwrapper">
<h1>title</h1>
 <div id="nestedwrapper">
 <p>put content here</p>
 </div> <! nestedwrapper ends -->
</div><!-- mainwrapper ends -->

Then for example you want to have the nested wrapper sat in the middle of the main wrapper, your CSS might look like this.

#mainwrapper {
width:800px;
background:#000;
}

#nestedwrapper {
width:600px;
margin-left:100px;
background:#fff;
}

Of course, it doesn't matter what you call your Divs so long as they are not called the same thing.

 

If this is not what you meant, maybe post more explicit details of what you're trying to do and I'll see if I can help.

 

Good luck.

notbanksy thanks,

 

can you help me with this as well?:

 

CODE:

 

#wrap1 {

margin: 0 auto;

width:700px;

height: 500px;

background-color: #cccccc

}

 

#wrap2 {

margin: 0 auto;

width:600px;

height: 400px;

background-color: #ffffff

}

 

HTML:

 

<div id="wrap1">

<div id="wrap2></div>

</div>

 

 

how do I center #wrap2 horizontally and vertically inside #wrap1.

notbanksy thanks,

 

can you help me with this as well?:

 

CODE:

 

#wrap1 {

margin: 0 auto;

width:700px;

height: 500px;

background-color: #cccccc

}

 

#wrap2 {

margin: 0 auto;

width:600px;

height: 400px;

background-color: #ffffff

}

 

HTML:

 

<div id="wrap1">

<div id="wrap2></div>

</div>

how do I center #wrap2 horizontally and vertically inside #wrap1.

Try this:

#wrap1 {
margin: 0 auto;
width:700px;
background-color: #cccccc
}

#wrap2 {
margin: 50px 100px;
width:600px;
background-color: #ffffff
}

This way, the nested div will expand to fit your content, but always appear centred inside the other div. You will need to add some content to your html to see this.

Hope that helps.

this

#wrap2 {
margin: 50px 100px;
.....

should actually be

margin:50px;

One thing to remember is that a wrapper is typically just the main "housing" for the rest of the content.. so placing a div within a div within that wrapper.. is the samething as a wrapper.. just not called it because a wrapper is usually the main parent div to the rest of the content. So don't let it confuse you

this

#wrap2 {
margin: 50px 100px;
.....

should actually be

margin:50px;

Thanks