All you need to do is "wrap" the the divs that you want on top/inside in the
tags of the div you want to contain it.
Change this:
<div id="main_content"></div>
<div id="box1">Content for id "box1" Goes Here</div>
To this:
<div id="main_content"><!-- The main container statrs here -->
<div id="box1">
Content for id "box1" Goes Here
</div>
<div id="box2">
Content for id "box3" Goes Here
</div>
<div id="box1">
Content for id "box3" Goes Here
</div>
</div><!-- The main container ends here -->
Now all 3 boxes are nested inside the main container because it's opening
and closing tags are wrappe around the the them.
Good Luck!
On Sat, Dec 13, 2008 at 10:28 PM, cindrr <[email protected]> wrote:
>
> Hi everyone,
>
> I am having trouble nesting divs that have a background image within
> Dreamweaver. I don't have the page up anywhere, but I can provide the
> code (below.)
>
> Basically, I'm trying to do something I thought would be simple
> (hahaha!)
>
> I want to have a main div 970px wide x 600px high. This div has a
> background img the same size. Then I want to nest 4 divs within the
> main div, to appear "on top" of the background image. (The background
> image is a JPG illustration with blue on white.) So these other 4 divs
> will have a white background and text content.
>
> I have tried (I think) every option when inserting the div boxes
> (which are 180px wide x 300px high) such as "at insertion point",
> "after start of tag", "before end of tag" etc. It either throw the box
> above or below the main div, NOT INSIDE IT.
>
> I am pretty familiar with how to float things properly, etc, but in
> this case I am not even using floats. The only thing I have done to
> center my page is set the margins on the main div to left and
> right>auto.
>
> If anyone has any ideas how to get this working, please help! Here's
> the code and CSS (in this case, the box1 div is being thrown outside
> and below the main_content div....)
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
> www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml";>
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
> <title>Title</title>
> <link href="seo2.css" rel="stylesheet" type="text/css" />
> </head>
> <body>
> <div id="main_content"></div>
> <div id="box1">Content for id "box1" Goes Here</div>
> </body>
> </html>
>
> CSS:
> #main_content {
> height: 600px;
> width: 970px;
> margin-right: auto;
> margin-left: auto;
> background-image: url(images/bg.jpg);
> }
> #box1 {
> background-color: #FFFFFF;
> height: 300px;
> width: 180px;
> }
>
> THANKS!! :)
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
-~----------~----~----~----~------~----~------~--~---
