Box within a box using css - How to? [Archive]

View Full Version : Box within a box using css - How to?

davidhelp

11-16-06, 01:22 PM

Just testing. I would like to put a box within a box using css (table within a table)
Here is 1 box. I don't know how to add another 'box' within the 1st one
Anyone have an answer?

<html>
<head>
<title>Box within Box</title>
<style type="text/css">

#box_main {
height: 300px;
width: 400px;
margin-top: 100px;
margin-left: 300px;
border: thin solid red;
padding: 10px;

</style>
</head>
<body>

<div id="box_main">
Put any other content here
</div>

</body>
</html>

BerksWebGuy

11-16-06, 01:25 PM

Just put it in there:

<div id="box_main">
<div style="margin:10px; border:1px solid #333333">
Put any other content here
</div>
</div>

You should see the div within the other.

davidhelp

11-16-06, 02:49 PM

Thanks for the answer. What do you do if you want 3 boxes?
1 box then 2 inside, each with it's own content?

Kitchensink108

11-16-06, 03:11 PM

Modifying the above code, try:<div id="box_main">
<div style="margin:10px; border:1px solid #333; width:200px; float:left;"> Put any other content here </div>
<div style="margin:10px; border:1px solid #333; width:200px;"> And more content here!</div>
</div>didn't test the code, but i think it's right.

BerksWebGuy

11-16-06, 03:17 PM

You can always put a div within another div.

If you want to put 2 divs side-by-side (like columns), then you use the float.

davidhelp

11-16-06, 06:16 PM

Thanks for the tips. They helped a lot. I have been using Notepad and fooling around some today while at ah.. work

I wish there was an editor that had one button like the Table button you find in most editors that you could create these divs (tables>
3 cols across 3 rows down, highlight any cell and add another or delete just like you can with a table.

I am starting to save snippets of css code that will remind me what to do for various elements when I create a webpage. I want a GUI. It seems were going backward in time to Notepad days

I will post my test box code after I fix it. It look ok in IE6 but it was a mess in Firefox then I found out about the problem with the box model with IE 5-6...