CSS - Absolute Positioning Of Nested Divs

Hi All,

I have the following html:

Code:

            <div class="businessItem">
                <div class="bizIcon">
                    <img src="GetImage.axd?type=1&business=3" alt="My Biz" />
                </div>
                <div class="bizInfo">
                    <a href="business.aspx?business=3">
                        My Biz
                    </a>
                    <p>

                        my biz
                    </p>
                </div>
                <div class="bizContact">
                    <a href="www.myweb.com">www.myweb.com</a><br />
                    <a href="mailto:roman.rodov@gmail.com">roman.rodov@gmail.com</a><br />
                    90294767
                </div>
            </div>

        
            <div class="businessItem">
                <div class="bizIcon">
                    <img src="GetImage.axd?type=1&business=4" alt="My Second Business" />
                </div>
                <div class="bizInfo">
                    <a href="business.aspx?business=4">
                        My Second Business
                    </a>
                    <p>

                        My second business
                    </p>
                </div>
                <div class="bizContact">
                    <a href="www.myweb.com">www.myweb.com</a><br />
                    <a href="mailto:roman.rodov@gmail.com">roman.rodov@gmail.com</a><br />
                    90294767
                </div>
            </div>

And the following CSS that applies:

Code:

div.businessItem
{ 
	background-color: #66cc66;
	margin-bottom: 10px;
	width: 100%;
	padding: 10px 10px 10px 10px;
}

div.bizIcon
{
	float: left;
	width: 64px;
	margin: 0px 10px 0px 0px;
}

div.bizInfo
{
	float: left;
	width: 256px;
}

div.bizContact
{
	float: left;
	width: 256px;
}

now the problem is that it looks like crap in FF2 and looks ok in IE7 (haven't tested IE6 yet). The idea is to have a full width div with 3 divs inside side by side. It looks *completely* different in FF2. Does anyone have any ideas? (I'm pretty new to CSS, just learning).

I have a div:
.gallery{width:95%;margin:0 auto;padding:5px;border:solid 1px black;}

and inside I have:
.galleryItem{float:left;width:150px;padding:5px;height:150px;border:solid 1px black;}
.spacer{clear:both;} Used to give height to the container div.

The idea is to create and even sized box for varying jpgs.

How do I get the inside divs to space themselves out evenly across the space?

AND the get the jpg to align itself in the middle of its containing div?

Thanks.

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??

Not sure about this one- maybe someone can help shed some light on it?

I have a <div> that contains a form. This div is dynamically-sized and floated left. What I want to do is place a nested <div> inside it so that it will cover the form below it.

What's happening is that if I add the nested <div>, it pushes the form in it's container <div> down, which is obviously not what I want. I have tried using z-index on this nested <div> but with no success.

Here is the code I'm using:
Code:

<div id="formdiv" style="display:block; padding-right:15px; padding-top:10px; border-right:#A0A0A0 1px dotted; float:left; width:auto; height:100%;">

    <div id="overlaydiv" style="top:0px; left:0px; width:100%; height:100%; background-color:#FF0000; z-index:500;"></div>

    <form>
       ...
    </form>

</div>

There is other <div> tags before and after the 'formdiv', which are part of the page layout, but do not need to be covered by the 'overlaydiv'. I should note that 'formdiv' is itself inside a container <div>.

I have tried various combination of CSS settings, but they don't give the same result. position:absolute; covers EVERYTHING within the uppermost container <div>, obviously not what I want. I've tried putting the form into it's own <div>, but I get the same result- the form just gets pushed below the 'overlaydiv'.

Anyone have any ideas?

Thanks,

- skubik

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.

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.

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

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.

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 think the best way to explain this is by example, if you go to this page:

http://lifeyouwant.workinprogress.co.uk/how-we-work

You will notice the drop down menu works fine in Firefox, Safari, Opera etc. However when it comes to IE7 the drop down menu is positioned too far to the right.

Has anyone got any ideas how I can get this to display correctly in IE7 (like it does in Firefox).

I would prefer to try not to use a hack for IE7.

ANy ideas would be great! Thanks.

Hello everyone, I would like to ask for any and all help on solving this problem I am having.

Well recently I used to make all of my web sites in tables until I came upon an article saying you should use CSS and absolute positioning. Therefore, my problem is this, If you go to this partially completed site, http://sykotic-designz.org/newsite/index.html.

You will now notice that there are two 'shadow' images. One on the left and one on the right. The one on the left works fine. Test it by making your browser window smaller and bigger. You will notice the right shadow moves. I have tried various alternatives like using a table just for the one image but you still need to use absolute position and did not work, I have messed with displaying absolute position by % and by pixels. But it doesn't want to seem to work either. I am mainly having problems probably because I am new to the DIV tags in which I use entirely through out this page, I am not sure if CSS will help at all. You can view the source of the page if you wish. I appreciate and and all help you may provide, thanks!

Hi everyone,

I just stated handcoding and I am having a great time. Everything seemed to be going well on my first site until I previewed it on IE. After solving the nasty png issue, I realized that the two elements that I have absolute postioned a) screw the layout up in IE6 b) don't appear all together in IE7 and IE8, but doesn't screw up the flow.

The elements are an arm that is supposed to hang off the left side, and hair that sits above the contentwrap (you will understand once you look)

It renders perfectly in Firefox, safari and google chrome. Go figure.

I read I can't put hyperlinks because of spam, so if you don't mind helping out, please visit:

w w w . goscoblog. com/test/index.html

Thanks In advance

Good morning,

I've been working on my site, and it's in its final stages, but I'm experiencing a problem I can't figure out.

I have a floating bar with all of my navigation links in it which is absolutely defined with the following code:

Code:

#headerBar { /* sets position of floating bar */
	position: absolute;
	clear: both;
	top: 57px;
	left: 0px;
	padding: 0px;
	margin: 0px;
	width: 100%;
	filter: alpha(opacity=50);
	-moz-opacity: .50;
	opacity: .50;
		}

The problem I'm experiencing is that in Firefox, Safari, and Opera, the bar appears magically in the perfect position, however, in Internet Explorer, the bar is 5-10 pixels higher than it should be.

The url is: http://www.alokw.com

Any suggestions?

Thanks!

Hey guys,

This is my first time messing with absolute positioning, and I am in a pickle.

I have created a website and it contains a services page. On the list of the services, when you scroll over each word, a block of text describing that particular service pops up.

Now, I have placed the box using <span>'s and hidden blocks. My problem is that when I change screen resolutions, the placement of the box changes. I am looking for a resolution-independent workaround for this, so that others running 1024, 1280, etc wont have a problem viewing the site correctly. I have searched the web dry it feels like. Maybe I'm just bad at looking, but its the last thing I need to do before putting up the site.

Check out the page and source code he
URL

Additionally, this is the code I used to make this (it's Eric Meyers PURE CSS codes):

Code:

<style type="text/css">
<!--
div#links a:hover {text-decoration: none; 
   background: #698165;}

div#links a span {display: none;}

div#links a:hover span {display: block;
   position: absolute; top: 535px; left: 233px; width: 377px; height: 230px;
   padding: 5px; margin: 10px; z-index: 100;
   color: white;
   font: 10px Verdana, sans-serif; text-align: justify;}
   
div#links a:link { text-decoration: none;
   color: white;}
   
div#links a:visited { text-decoration: none;
   color: white;}
-->
</style>

then the code is activated by:

Code:

<a href="#">Mowing
<span>Service Landscapes will tend and maintain your lawn with the most substantial of detail and care.  Our services will provide you with a beautiful, healthy landscape that will turn heads.  If you are looking for quality and dependable service that you can turn to time and time again, look no further than Service Landscapes.
</span>
</a>

Any help would be greatly appreciated, and thanks in advance!

Hello All.

I have very little experience with coding and the likes so i don;t even think I'm allowed to post on these forums? hehe

BUT, I have ran into a problem on myspace with code.

I am trying to create a linkable image I believe it would be called.

<a href="website url">
<img src="wouldnt let me post url's" />
</a>

Thats what i have so far. I beleive that means when the image is clicked it takes y ou to the homepage. (I dont even know if that is CSS, so i apologize if this is the wrong forum I'm posting on.)

I am trying to get the image to appear around 300 pixels from the left and 400 pixels from the top. I had looked on google for a solution of some code to help me out and all I found was thing saying how 'Absolute Positioning' was what was needed. I tried adding various bits of code I had found to the code i currently had, and some of them would almost work, but text would appear after the image and it would be clickable also.

I was just wondering how I could place the image were I want it and when it is clicked on, it takes you to the homepage.

Thanks in advance to anyone who replies, and also apologies for my incredible noobness.

-Connor