CSS - Problems With Nested Divs? Css Isnt Applied Properly

if i create a div box with some transparency and then create another div insde it then the second div takes on the opacity of the containing one. how can i stop this?

<div class = "f">
<div class = "s">
hello
</ div>
</div>


the css code:


.f{
background: 669999;
width: 500px;
height: 300px;
position: absolute; top: 15px; left: 80px;
z-index:1;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}

.s{
background: 55ffcc;
width: 400px;
height: 200px;
position: absolute; top: 15px; left: 20px;
padding: 40px;
}

I am having a problem using nested hidden divs. I'd like to know if what I am doing is even possible.

I have one div that is set to "display: none". Inside this div I have another set to "display: none". When I change the style of the outer div to "display: block", the inner div appears as well.

Is there a way to keep the inner div hidden??

So, I have a div for content that contains three other divs for a three column display, like this:
Code:

<div id="content">
       <div id="col1" class="column">filler filler filler</div>
       <div id="col2" class="column">filler filler filler</div>
       <div id="col3" class="column">filler filler filler</div>
</div>

now my CSS looks like this:
Code:

#content { 
top:10%; 
height: auto; 
background:#009999; 
border-width:thin; 
border-style:solid; 
border-color:#003333; 
overflow:hidden; 
}

.column { 
position:absolute; 
top: 0%; 
width: 30.66%; 
display:block;
}

the problem is that the content div isn't resizing to fit the column divs. It's just a tiny thin strip at the top. It is also not hiding any of the column divs, it shows all of them. If I change height to, say, 200px it resizes to that value, and if I put text directly into that div (as opposed to the text in the column divs) it resizes to fit that. Any help/ideas would be greatly appreciated, thanks.

Hey everyone. Ran into a little snafu with CSS in firefox and NN last night. What I had, basically, was:

Code:

<DIV style='position:relative; margin-top:90px;'>
  <DIV style='position:relative; margin-top:14px;'>
    <img src='someimage.gif'>
  </DIV>
  <DIV style='position:relative; margin-top:8px;'>
    <img src='someimage2.gif'>
  </DIV>
</DIV>

the margin-top:14px was having absolutely no effect. The 8px one worked, but the 14px one only moved when I set it to over 90px, which would be more like absolute positioning, no?
Now of course this could be rectified by just setting the top margin of the outter div to 104px and getting rid of the 14px one alltogether, but I'm sure there'd be instances where I'm using a php include for the inner divs or somthing and that wouldn't be an option. Can anyone offer me any thoughts or clarity on this? It worked fine in IE.
Thanks.

Hello all,

I've been scratching my head on this one for a bit. First of all, here's the site I'm working on:

http://dev.discoverahost.com

If you'll note, the background for the content is currently blank. I'm trying to get a background to cover that area.

Here's the basic structure for that page:
Code:

<div id="main_header">
</div>
<div id="main_navigation">
Home :: About :: Link :: Such and Such
			
</div>
<div id="content_wrap">
<div id="image_below_nav">
</div>
			
<div id="content_main_header">
</div>
			
<div id="content_main">
Lorem Ipsum blah blah blah
</div>
</div>

Note: That's not all the code. You can look at the souce for the full thing.

The background I'm trying to apply I want to go on the wrapper background (content_wrap).

I've got it all defined in the CSS file, located he
http://dev.discoverahost.com/css/style.css

The problem is that the wrapper isn't expanding vertically to include the background, even though I've got plenty of text inside of another nested div. Now it works if I put content outside of these divs ... which I really don't want to do.

Maybe I've got my structure all wrong for doing this kind of thing, but any and all help is very much appreciated. Thanks!

- Adam

This could be argued that it belongs in a JavaScript forum but I think the core of the problem lies in where the information should go so I shall post it here.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>My site</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style type="text/css">
      #base { 
        clear: both;
        padding-top: 1px;
        border-top: 1px solid #ffffff;
        border-bottom: 1px solid #ffffff;
        width: 100%; 
        background: #0f0f0f;  } /* end #base */
      #main_block { 
        background: #0000ff;
        margin: auto;
        text-align: left;
        width: 955px; } /* end #main_block */
      #main_content { 
        background: #ffffff;
        border-left: 1px solid #0000ff;
        border-right: 1px solid #0000ff; } /* end #main_content */

      #top_main_content { padding-top: 1em; } 
      #top_main_content ul {
        float: left;
        list-style-type: none;
        border-spacing: 0;
        border: 0;
        margin: 0;
        padding: 0;
        text-align: right;
        border-top: 1px solid #ff0000;
        height: 243px;
        width: 266px; } /* end #top_main_content ul */
      #top_main_content ul li {
        color: #00ff00;
        width: 266px;
        border-bottom: 1px solid #ff0000; } /* end #top_main_content ul li */
      #top_main_content ul li a { 
        line-height: 26px;
        display: block;
        color: #00ff00;
        width: 266px; } /* end #top_main_content ul li a */
      .indent { padding-right: 1.5em; }
      #top_main_content ul li a:hover {
        background: #cfcf00; 
        color: #000000; } /* end #top_main_content ul li a:hover */
      #top_main_content #rotating { 
        z-index: 0;
        float: right;
        width: 687px;
        height: 242px;
        border-bottom: 1px solid #ff0000;
        border-top: 1px solid #ff0000; } /* end #top_main_content #rotating */
      #default { 
        position: absolute;
        visibility: visible; } /* end #default */
      #a { 
        position: absolute;
        visibility: hidden; } /* end #a */
      #b { 
        position: absolute;
        visibility: hidden; } /* end #b */
      #c { 
        position: absolute;
        visibility: hidden; } /* end #c */
      #d { 
        position: absolute;
        visibility: hidden; } /* end #d */
      #e { 
        position: absolute;
        visibility: hidden; } /* end #e */
      #f { 
        position: absolute;
        visibility: hidden; } /* end #f */
      #g { 
        position: absolute;
        visibility: hidden; } /* end #g */
      #h { 
        position: absolute;
        visibility: hidden; } /* end #h */
      #i { 
        position: absolute;
        visibility: hidden; } /* end #i */
    </style>
    <script language="javascript">
	  function change_graphic(to_visible) {
 	   var num_elements = 10;
	    var elements = new Array(num_elements);
	    var i = 0;
	    elements[i++] = "default";
	    elements[i++] = "a";
	    elements[i++] = "b";
	    elements[i++] = "c";
	    elements[i++] = "d";
	    elements[i++] = "e";
	    elements[i++] = "f";
	    elements[i++] = "g";
	    elements[i++] = "h";
	    elements[i++] = "i";
	    var temp = "";
	    for(i = 0; i < num_elements; i++) { 
	  	  document.getElementById(elements[i]).style.visibility = "hidden"; }
	    document.getElementById(to_visible).style.visibility = "visible"; } // end function change_graphic(path)
	</script>
  </head>
  <body>
    <div id="base">
      <div id="main_block">
        <div id="main_content">
          <div id="top_main_content" onmouseout="change_graphic('default');">
            <ul>
              <li onmouseover="change_graphic('a');"><a href="#"><span class="indent">Link A</span></a></li>
              <li onmouseover="change_graphic('b');"><a href="#"><span class="indent">Link B</span></a></li>
              <li onmouseover="change_graphic('c');"><a href="#"><span class="indent">Link C</span></a></li>
              <li onmouseover="change_graphic('d');"><a href="#"><span class="indent">Link D</span></a></li>
              <li onmouseover="change_graphic('e');"><a href="#"><span class="indent">Link E</span></a></li>
              <li onmouseover="change_graphic('f');"><a href="#"><span class="indent">Link F</span></a></li>
              <li onmouseover="change_graphic('g');"><a href="#"><span class="indent">Link G</span></a></li>
              <li onmouseover="change_graphic('h');"><a href="#"><span class="indent">Link H</span></a></li>
              <li onmouseover="change_graphic('i');"><a href="#"><span class="indent">Link I</span></a></li>
            </ul>
            <div id="rotating">
              <div id="default"><img src="images/default.gif" alt="" /></div>
              <div id="a"><img src="images/test_image_a.gif" alt="" /></div>
              <div id="b"><img src="images/test_image_b.gif" alt="" /></div>
              <div id="c"><img src="images/test_image_c.gif" alt="" /></div>
              <div id="d"><img src="images/test_image_d.gif" alt="" /></div>
              <div id="e"><img src="images/test_image_e.gif" alt="" /></div>
              <div id="f"><img src="images/test_image_f.gif" alt="" /></div>
              <div id="g"><img src="images/test_image_g.gif" alt="" /></div>
              <div id="h"><img src="images/test_image_h.gif" alt="" /></div>
              <div id="i"><img src="images/test_image_i.gif" alt="" /></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

What I have is a set of links that when hovered will change the contents of the rotating div to reflect information about that particular link. As the code stands now, whenever any other item is moused over, the div will reset to the default div.

What I would like to happen is whenever the top_content div is mousedoff (new word?), the content resets to the default.

Thus I should be able to hover over a link, change the content of the rotating div, and move from that link directly to the content and mouse around over there all I want without changing back to the default div.

To me, what I have should work in that I am thinking of nested divs as a parent/child relationship but that is obviously not how the browser is interpreting it. Any ideas on how I can achieve this? The JavaScript portion has been tested and works correctly.

Edited: This code also pushes the side menu into the border in Opera. This problem was addressed and fixed in a previous thread but I broke it again.

I'm trying to recreate a header that was built using tables.

Here is an example of the original header. This is how I want it to look using div.

http://65.175.116.253/logo/html_head_p1.html

Here is the code for the table based header

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
</HEAD>

<body bgcolor="white" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
		
<basefont face="verdana">

<table width="780" height="68" border="0" cellpadding="0" cellspacing="0">
<tr> 
<td bgcolor="#004C91" align="center" valign="center" width="222"><img src="http://65.175.116.253/logo/logo.gif" width="196" height="49" hspace="10">
</td>
<td bgcolor="#004C91" align="center" valign="center" width="600">
<img src="http://65.175.116.253/logo/banner.jpg">
</td>
</tr>
</table>
</body>
</html>

Here is the header using the code with DIVs.

http://65.175.116.253/logo/styletest.html

Here is the code I have using divs. I'm confused as to how to align the images correctly in the divs... Can someone show me how to correct this? I put the style info in teh same document so it would be easier to read.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>

<style type="text/css">
#headerlogo {
background: #004C91;
position: absolute;
width: 222px; 
height: 68px;
top: 0px;
padding-left: 0px;
padding-right: 0px;
}

#headerbanner {
background: #004C91;
position: absolute;
width: 600px; 
height: 68px;
top: 0px;
padding-left: 50px;
padding-right: 0px;
}
</style>

<title>Untitled</title>

</head>


<body>
<div id="headerlogo"><img src="http://65.175.116.253/logo/logo.gif">
<div id="headerbanner"><cfinclude template="banner.cfm">


</body>
</html>

This is driving me crazy and I can't figure it out. I have a "content" div that is a container for 2 other div's (a sidebar and a main content area). For some reason it isn't rendering in the proper place; it's rendering at the top of the page instead of under the navigation (if I don't assign a height to it it doesn't render at all). It also isn't extending past the end of the other 2 div's to reach the footer. I have tried adding overflow hidden to it but it just makes the other 2 divs not render at all. Any help is greatly appreciated.

Here is the HTML and the CSS is below it.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Portal - Layout Generator</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
 <div id="wrapper">
    <div id="header">
		 
		       <p>This is the Header</p>		 
			   
	 </div><!-- /#header -->
 	 <div id="navigation">
		 <ul>
			<li><a href="#" >Home</a></li>
			<li><a href="#" >About</a></li>
			<li><a href="#" >Contact</a></li>
			<li><a href="#" >Links</a></li>		 
		 </ul>		 
	 </div><!-- /#navigation -->
	 <div id="content">
		 <div id="leftcolumn">
			<div class="box_blue">
				<div class="box_header_blue">Hello, World!</div><!-- /.box_header_blue -->
				<div class="box_content_blue">
		 			<ul>
						<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
						<li>Aliquam scelerisque eros at est lobortis eget adipiscing felis sodales.</li>
						<li>Sed faucibus hendrerit ante, vitae volutpat tellus suscipit sit amet.</li>
						<li>Quisque rutrum arcu non ipsum fringilla dapibus.</li>
						<li>Aliquam aliquam arcu sit amet nisi viverra facilisis.</li>
					</ul>
				</div><!-- /.box_content_blue -->
		 	</div><!-- /.box_blue -->
		 </div><!-- /#leftcolumn -->
		 <div id="main">
		      
			  <p>This is the main content</p><br /><br /> 
              <p><a href="layouts/121836.htm">

              <img border="0" src="layouts/html.png" width="16" height="16"> HTML File</a></p>
              <p><a href="layouts/121836.css">
              <img border="0" src="layouts/css.png" width="16" height="16"> CSS File</a></p>
	          <p>To download, right click and choose 'Save Target as...'</p>
	          <p>&nbsp;</p>
	          <p>If you use one of these layouts, please consider linking to CSS Portal.<br />
                http://www.cssportal.com</p>
                
              
	          		 
		 </div><!-- /#main -->
	 </div><!-- /#content -->
	 <div id="footer">
		       
			   <p>This is the Footer</p>		
			    
	 </div><!-- /#footer -->  
 </div><!-- /#wrapper -->
</body>
</html>

Code:

* { padding: 0; margin: 0; }

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

a{
	text-decoration: none;
	color: inherit;
	}
	
ul {
	list-style: none;
	}

body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 13px;
 background: url('images/bg.png') fixed;
}

p {
 padding: 10px;
}

#wrapper { 
 margin: 0 auto;
 width: 1000px;
}

#header {
 color: #333;
 height: 200px;
 background: url('images/header.png') fixed;
}

#footer { 
 height: 100px;
 clear: both;
 color: #333;
 background: #6B6659;
}

#navigation {
 float: left;
 width: 1000px;
 height: 35px;
 color: #333;
 background: #6B6659;
 background: #b5bdc8; /* old browsers */
 background: -moz-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%); /* firefox */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* webkit */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* ie */
 line-height: 35px;
}

#navigation li {
	display: inline;
	float: left;
	padding: 0 10px;
	color: #dddddd;
	}

#content {
	background: #f6f9fa repeat;
	color: #545454;
	margin: 0 auto;
	box-shadow: 2px 0px 3px rgba(0,0,0,.8), -2px 0px 3px rgba(0,0,0,.8);
	 -moz-box-shadow: 2px 0px 5px rgba(0,0,0,.8), -2px 0px 5px rgba(0,0,0,.8);
	 -webkit-box-shadow: 2px 0px 3px rgba(0,0,0,.8), -2px 0px 3px rgba(0,0,0,.8);
	 position: relative;
	} 

#leftcolumn { 
 color: #333;
 background: #EBE3CD;
 width: 200px;
 float: left;
 padding: .5em;
}

#main { 
	color: #333;
	background: #fff;
	width: 770px;
	float: right;
	padding: 8px;
}

.box_blue {
	-moz-border-radius: 1.2em 1.2em 1.2em 1.2em;  
	-moz-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.6); 
	margin: 1.6em 0;
}

.box_header_blue {
	background-color: rgb(23, 71, 115); 
	color: rgb(255, 255, 255); 
	font-weight: bold; 
	line-height: 3em; 
	text-align: center; 
	font-size: 1.2em; 
	-moz-border-radius-topleft: 1.2em; 
	-moz-border-radius-topright: 1.2em; 
	border-right: 1px solid rgb(0, 0, 50); 
	border-width: 1px; border-style: solid; 
	border-color: #86B1E3 rgb(0, 0, 50) rgb(0, 0, 50); 
	text-shadow: 1px 1px 1px rgb(16, 16, 16); 
	background-image: -moz-linear-gradient(center top , rgb(45, 90, 141), rgb(71, 93, 167) 50%, rgb(43, 75, 128) 51%, rgb(45, 93, 138));
	}
	
.box_content_blue {
	padding: .5em;
   background: -moz-linear-gradient(top, #f1f1f1, #fff 75%) #fff;
	display: inline-block; 
	border-right: 1px solid rgb(0, 0, 50); 
	border-width: 1px; 
	border-style: solid; 
	border-color: rgb(152, 208, 237) rgb(0, 0, 50) rgb(0, 0, 50); 
	-moz-border-radius-bottomleft: 1.2em;
	-moz-border-radius-bottomright: 1.2em;
	}
	
.box_content_blue li {
	padding: 10px 0;
	border-bottom: 1px dotted #cccccc;
	}

Hi,

I'm trying to build a modal box tool. Yes I know downloadable solutions exist, but wisely or not I'm building from scratch. And the javascript is fine, but on the CSS I feel I'm not quite doing it right.

The HTML structure is pretty straightforward:
PHP Code:
<div id="PopUpBox" class="SinglePopUpBox" style="display:none">
  <div class="TopBar">
    <div class="CloseX"><a href="javascript:closePopUp()"><img src="Images/WindowCloseX.PNG" /></a></div>
    <div id="PopUpBoxTitle" class="Title"></div>
  </div>
  <div id="PopUpContainer" class="Container"><b style="color:#FFFF00">...Connectiing...</b></div>
</div> 




and I just stick that on any underlying page with a button to make it appear. Ajax connects and injects the chosen content into PopUpContainer.

Here's the issue. PopUpBox I want to be a percentage of the screen, to work on any size window. It appears in the middle via percentages. TopBar within that is a fixed height. And then PopUpContainer should fill the rest of the PopUpBox.

So I set height=100% on PopUpContainer. But then it overflows the box by exactly the height of TopBar. At first I thought "hey, this sounds like a job for clearfloat" but that doesn't work. And it shouldn't, because floats aren't the issue. The problem I believe is going to 100% of a variable size. % of (% - x) to be more precise.

So I "fix" this by giving PopUpBox enough padding-bottom to match the size of TopBar. This immediately feels bad, and I don't even know why. But it looks good, so I was prepared to shut up and accept it.

However, IE7 (and probably 6, if I wanted to try it) don't play along. (Ditto IE8 in compatability mode, naturally.) They don't seem to respect that height=100% at all, and will make the Container shrink or bust out depending on what's inside.

So what's the right approach to doing this? I'm quite willing to make moderate changes to my approach, but less happy to do stuff like add 12 pages of javascript to resize the box.

CSS:
PHP Code:
 div.SinglePopUpBox {
    color: #FFFFFF;
    border: 1px solid #CCCCCC;
    background-color: #000000;
    position:fixed;
    z-index: 100;
    left: 15%;
    top: 15%;
    right: 15%;
    bottom: 15%;
    padding:0px;
    padding-bottom:31px; /* Made to match height of TopBar + Container margin + Container Border + this border */
}
div.SinglePopUpBox div.TopBar {
    background-color:#000000;
    background-image: url(Images/TopBar-Black.PNG);
    width:100%; 
    height:26px;
    vertical-align:bottom;
}
div.SinglePopUpBox div.TopBar div.CloseX {
    float:right;
    margin-right:5px;
}
div.SinglePopUpBox div.TopBar div.Title {
    font-weight:bold; 
    font-size:14px; 
    padding-top:5px; 
    padding-left:10px
}
div.SinglePopUpBox div.Container {
    background-image: url(Images/BackgroundBlue.JPG);
    overflow:auto;
    height:100%;
    padding-left:20px;
    padding-right:20px;
    margin-left:3px;
    margin-right:3px;
    border: 1px solid #CCCCCC;
} 

Hi, I think this might requiere an IE hack buti have nested divs inside a div on http://gohedonist.com/mempage.php?id=19 but for some reason instead of the divs bein constainted inide the larger div they go all the way down the screen. This is works fine in FF. The problem is located at http://gohedonist.com/mempage.php?id=19 (select Submissions from the dropdown box on the right). Thanks for any help in advance.

I'm aiming to have a flash navigation console nested inside a div which extends outside the left boundary of it's parent div.

It's very hard to explain exactly so I've drawn some diagrams.

Here's what I'm trying to acheive:
URL

Here's the actual result i've come up with so far:
http://www.advancedschoolyearbooks.com/divtest.html
The results differ depending on the browser. In IE the horizontal positioning of the "NavInner" DIV is spot on but vertically it is hugging the top of the "Wrapper" table when it should be hugging the top of the "Navigation" DIV
In firefox I can not see the image contained in the "NavInner" DIV at all.


Here's a snip of my CSS:
Code:

body, html, #wrapper {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #000000;
	height: 100%;
}

#wrapper {
	margin: 0 auto;
	text-align: left;
	vertical-align: middle;
	width: 100%;
}

#OuterFull {
	width: 100%;
	text-align: center;
	display: block;
}

#OuterBoxed {
	width: 969px;
	height: 650px;
	display: block;
	margin: 0 auto;
}

#LeftCol {
	width: 485px;
	height:650px;
	float: left;
}

#RightCol {
	width: 484px;
	height: 650px;
	float: left;
	background: url(bg.jpg) bottom left no-repeat;
}

#Navigation {
	width: 484px;
	height: 180px;
	float: right;
	overflow: hidden;
	text-align: right;
	margin: 0 auto;
}

#NavInner {
	width: 969px;
	height: 180px;
	float: right;
	text-align: right;
	position: relative;
	left: -485px;
}

#Content {
	width: 484px;
	height: 470px;
	float: right;
	overflow-y: auto;
	overflow-x: hidden;
}

Here's my HTML:
Code:

<body>
    <table width="100%" border="0" cellspacing="0" cellpadding="0" id="wrapper">
        <tr>
            <td align="center" valign="middle">
                <div id="OuterFull" align="center">
                    <div id="OuterBoxed">
                        <div id="LeftCol">LeftCol</div>
                        <div id="RightCol">
                            <div id="Navigation">
                                <div id="NavInner"><img src="nav.jpg" /></div>
                            </div>
                            <div id="Content">Content</div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</body>

I want to have one main div that is horizontally centered on the page. Inside of it I want two nested divs, located right next to each other. It seems that the top property of the second nested div is being ignored, as it is being placed directly below the first nested div. Here is a sample that demonstrates what is happening.

Am I doing something wrong or is what I'm trying to do fundamentally the wrong way to do it?

Code:

<html>
<head>
<style type="text/css">
#a
{
   width: 800px;
   height: 800px;

   margin: 0 auto;
   text-align: center;

   background-color: #ff0000;
}

#b
{
   position: relative;

   top: 50px;
   left: 50px;

   width: 300px;
   height: 300px;

   background-color: #0000ff;
}

#c
{
   position: relative;

   top: 50px;
   left: 350px;

   width: 300px;
   height: 300px;

   background-color: #00ff00;
}
</style>
</head>

<body>

<div id=a>
   <div id=b>test</div>
   <div id=c>test</div>
</div>

</body>
</html>

I'm trying to create a gallery, composed of an image and description divs (like so);

pic1


What I want is to wrap these divs with a bordered div, that will accomodate as many of them per row as will fit the width of the browser, but also centering the wrapper like thus examples:

pic2



This is what I have so far:
Code:

<html>
<head>
<title></title>
<meta http-equiv=content-type content="text/html; charset=iso-8859-1">

<style>
html, body
{
margin: 0px;
}

div#item_container_box
{
position: relative;
width: 100%;
left: 0;
top: 0px;
}

#item_container
{
margin: 10px;
border: solid 1px #000;
padding: 2px 0px 2px 0px;
}
html>body #item_container
{
padding: 2px;
}

div.spacer
{
width: 200px;
background-color: #333;
clear: both;
}

div.center
{
width: 50%;
}

div.item
{
float: left;
text-align: center;
/* float: left; */
width: 200px;
height: auto;
margin: 2px;
}

div.data
{
float: left;
width: 200px;
background-color: #ccc;
}
</style>

</head>

<body>
<div align=center>


<div id="item_container_box">
<div id="item_container" align="center">
<div class="spacer">.</div>

<div class="center"></div>

<div class="item"><img src="_data/images/records/1.jpg"><div class="data">Item 1</div></div>
<div class="item"><img src="_data/images/records/2.jpg"><div class="data">Item 2</div></div>
<div class="item"><img src="_data/images/records/3.jpg"><div class="data">Item 3</div></div>
<div class="item"><img src="_data/images/records/4.jpg"><div class="data">Item 4</div></div>
<div class="item"><img src="_data/images/records/5.jpg"><div class="data">Item 5</div></div>
<div class="item"><img src="_data/images/records/6.jpg"><div class="data">Item 6</div></div>

<div class="center"></div>

<div class="spacer">.</div>
</div>
</div>


</div>
</body>
</html>

Some help on this, would be very much appreciated.

I have a menu system that I'm triyng to nest in my navbar div. The problem is that the absolute postioning of the nested divs are causing them to bust out of the navbar div. What can I do to remedy the problem. Here is my CSS

Code:

#header {
          width: 100%;
          height:145px;
          background-image: url(images/topbackground2.jpg);
          background-repeat: repeat;
}
#navbar {
          width: 122px;
          background-color:#3f79a1;
          position: relative;
          float: left;
          border;
         }
#content {
          
          height:100%;
          background-color:#3f79a1;
          position: relative;
          float: right;
}
#footer {
          background-image: url(images/gradientsmaller2.gif);
          font: 10pt;
          background-color: #ccffcc;
          width: 100%; 
          text-align: center;
          padding: 0 15%;
          clear:both;
}

Here is the html for the navbar div
Code:

<div id="navbar">

<div id="p7menu1" style="position:absolute; left:0px; top:15px; width:122px; z-index:106"><a href="javascript:;" onClick="P7_trigMenuMagic1('p7menu1',1);return false" onMouseOver="P7_rollCMenu1(event,'p7menu1',0)" onMouseOut="P7_rollCMenu1(event,'p7menu1',0)" onFocus="if(this.blur)this.blur()"><img src="images/Login.gif" width="122" height="20" name="p7mbut1" border="0" alt="menu 1"></a></div>
<div id="p7menu2" style="position:absolute; left:0px; top:35px; width:122px; z-index:107"><a href="javascript:;" onClick="P7_trigMenuMagic1('p7menu2',1);return false" onMouseOver="P7_rollCMenu1(event,'p7menu2',0)" onMouseOut="P7_rollCMenu1(event,'p7menu2',0)" onFocus="if(this.blur)this.blur()"><img src="images/EditProfile.gif" width="122" height="20" name="p7mbut2" border="0" alt="menu 2"></a></div>
<div id="p7menu3" style="position:absolute; left:0px; top:55px; width:122px; z-index:108"><a href="javascript:;" onClick="P7_trigMenuMagic1('p7menu3',1);return false" onMouseOver="P7_rollCMenu1(event,'p7menu3',0)" onMouseOut="P7_rollCMenu1(event,'p7menu3',0)" onFocus="if(this.blur)this.blur()"><img src="images/InstructorInfo.gif" width="122" height="20" name="p7mbut3" border="0" alt="menu 3"></a></div>
<div id="p7menu4" style="position:absolute; left:0px; top:75px; width:122px; z-index:109"><a href="javascript:;" onClick="P7_trigMenuMagic1('p7menu4',1);return false" onMouseOver="P7_rollCMenu1(event,'p7menu4',0)" onMouseOut="P7_rollCMenu1(event,'p7menu4',0)" onFocus="if(this.blur)this.blur()"><img src="images/MyCourses.gif" width="122" height="20" name="p7mbut4" border="0" alt="menu 4"></a></div>
<div id="p7menu5" style="position:absolute; left:0px; top:95px; width:122px; z-index:110"><a href="javascript:;" onClick="P7_trigMenuMagic1('p7menu5',1);return false" onMouseOver="P7_rollCMenu1(event,'p7menu5',0)" onMouseOut="P7_rollCMenu1(event,'p7menu5',0)" onFocus="if(this.blur)this.blur()"><img src="images/GradeBook.gif" width="122" height="20" name="p7mbut5" border="0" alt="menu 5"></a></div>
<div id="p7submenu1" class="pviimenudiv" style="position:absolute; left:142px; top:35px; width:102px; visibility: hidden; z-index:101">
  <table width="108" border="0" cellspacing="6" cellpadding="0">
  <tr><td>stuff</td></tr>
  </table>
</div>
<div id="p7submenu2" class="pviimenudiv" style="position:absolute; left:142px; top:55px; width:102px; visibility: hidden; z-index:102">
  <table width="108" border="0" cellspacing="6" cellpadding="0">
  <tr><td>stuff</td></tr>
  </table>
</div>
<div id="p7submenu3" class="pviimenudiv" style="position:absolute; left:142px; top:75px; width:102px; visibility: hidden; z-index:103">
  <table width="108" border="0" cellspacing="6" cellpadding="0">
  <tr><td>stuff</td></tr>
  </table>
</div>
<div id="p7menubottom" class="pviimenudiv" style="position:absolute; left:10px; top:115px; width:102px; visibility: visible; z-index:111">
 <table width="108" border="0" cellspacing="6" cellpadding="0">
  <tr><td>stuff</td></tr>
  </table>
  
</div>
</div>

Sorry for so much code. I'm completely frustrated! I can't seem to get this layout to work at all. I was using frames which was fine but I have to make this work without frames now. Thanks for any help.