nesting multiple <div>s inside a "center fixed" <div> ??

**deltatango5** · 01-03-2008, 06:31 PM

I've been trying to find a "solution" that allows me to have a parent <div> (with a fixed position-centered) on a browser page, and have it contain multiple nested <div> tags.

I want to be able to do this so it works on both IE and FF, as well MAC. Through several attempts I've utilized a background-image--but don't believe that is compliant with "all" recent platforms, etc. I've also been able to place the nested <div> tags but then shove the parent div's image down ...

Does anyone have thoughts, links, suggestions or a quick example to toss my way?

Thanks Much and Happy New Year!

Des

Code:

<!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=iso-8859-1" />
<title>TEST</title>


<style type="text/css"><!--
body {
background-color: #EEEEEE;
color:#564b47;  
padding:20px;
margin:0px;
text-align: center;
}

#main { 	
z-index:0
text-align: left;
vertical-align: middle;	
margin: 0px auto;
padding: 0px;
height: 531px;
width: 804px;
background-color: purple;
//background-image:url(images/bg-lft2.gif);
//background-repeat: no-repeat;
//border: 1px dotted #564b47;
//border: 1px dashed #564b47;
border: 1px solid #81B1D9;
}

#c1 { z-index:10; position:relative; width: 100px; height: 100px; left:5px; top:5px; background-color: #FF9900; }
#c2 { z-index:20; position:relative; width: 100px; height: 100px; left:5px; top:10px; background-color: #FF6600; }
#c3 { z-index:30; position:relative; width: 100px; height: 100px; left:5px; top:15px; background-color: #FF3300; }

--></style>

</head>



<body>


<div id="main">

<div id="c1"><img src="images/invisi.gif" alt="" width="100" height="100" border="0"/></div>
<div id="c2"><img src="images/invisi.gif" alt="" width="100" height="100" border="0"/></div>
<div id="c3"><img src="images/invisi.gif" alt="" width="100" height="100" border="0"/></div>

<img src="images/bg-lft2.gif" alt="" width="804" height="531" border="0"/>
</div>




</body>
</html>

**BLiZZaRD** · 01-04-2008, 03:16 AM

You can't if you use position:*** in the child divs. Basically the style other than that can be up to you, but is needs to look something like:

first the big ol daddy div, which hold everything. This one you can position however you want, absolute, relative, top and left em's etc..
Then you have the 3 child divs. You can not use position in these, and they need to be nested together in the HTML. Make one larger than the rest, the second larger than the third.. etc... then in ALL of them float:left;

HTML Code:

<div id="big ol daddy">

<div id="child1">
<div id="child2">
<div id="child3">
</div>
</div>
</div>
</div>

in a nut shell. (no pun intended) and the css:

Code:

#big ol daddy { 	
text-align: left;
vertical-align: middle;	
margin: 0px auto;
padding: 0px;
height: 531px;
width: 804px;
background-color: purple;
//background-image:url(images/bg-lft2.gif);
//background-repeat: no-repeat;
//border: 1px dotted #564b47;
//border: 1px dashed #564b47;
border: 1px solid #81B1D9;
}

#child1 {
width: 600px;
height: 300px;
left:5px;
top:5px;
background-color: #FF9900;
float:left;
}
#child2 {
width: 400px;
left:5px;
top:5px;
background-color: #FF9900;
float:left;
}
#child3 {
width: 100px;
left:5px;
top:5px;
background-color: #FF9900;
float:left;
}

like so, abouts.

**The Smoking Gun!** · 01-05-2008, 01:25 AM

Thanks for resolving my mystery page layout disassembly whenever I was editing an area that left the rest of the div areas scattered about the page, now i understand the relationship with the parent and child divs and how they need to be formatted and the structure that results!

TSG!

**BLiZZaRD** · 01-05-2008, 05:34 PM

It is all dependent of what you want. The above will place one large div that basically hold the entire page, you may or may not want that. The other 3 are inside each other in the above example. If that works for page 1, it may not for page 2.

For page 2 then you would do something like:

Code:

<div id="1">
content here
</div>
<div id="2">
content
</div>

But instead of stacking say you want them next to each other, instead of float:left; you would put display:inline;

That would make them lay next to each other horizontally.

It all depends on what you want. If you can design it on paper, CSS can help you make it on web pages.

Thread: nesting multiple <div>s inside a "center fixed" <div> ??

Thread Tools

Search Thread

nesting multiple <div>s inside a "center fixed" <div> ??

Bookmarks

Bookmarks

Posting Permissions