Jump to content

box in box etc...


Recommended Posts

Hello guys,I want to make box in box in box etc... I mean something like this:box.pngso each box have own border and so on.I made something like this:

HTML: <div id="one"><div id="two"></div></div>CSS:#one { width: 100px; height: 100px; border: 1px solid black; }#two { width: 50px; height: 50px; border: 1px solid black; }

But of course it didnt work. Please help.

Link to comment
Share on other sites

If you don't write anything in the div's it won't work. Just put   inside or something like this:

<div id="one"><div id="two"> </div></div>

I didn't go through the little code you have, so it might be something wrong with the code too. I haven't time to check rigth now so.Edit:Try something like this:CSS

#one {width: 100px;border: 1px solid black;}#two {padding: 10px;border: 1px solid black;}#three {padding: 10px;border: 1px solid black;}#four {padding: 10px;border: 1px solid black;}


<div id="one"><div id="two"><div id="three"><div id="four"> </div></div></div></div>

Here's the result

Link to comment
Share on other sites

FireFox will display empty divs as will IE7 (and probably opera & safari), IE6 will not display empty divs but you can trick it by nesting an empty span inside.This is useful when the nbsp is undesirable for one reason or another.<div style="height:4px; width:40px; margin:auto; border:1px dotted #DDE;"><span></span></div>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...