CSS - Absolutely-position Div To Take Full Size Of Parent

How could I Force a parent div to vertically expand to size of its child div?

Thanks in advance,
Richard Carson

I have an navigation menu that I am building as an unordered list. What I have is an image rollover that appears at the bottom of the navigation menu when the cursor hovers over one of the first level links by using a span within the link that has its display set to none, and then set to absolute positioned directly below the navigation menu on a:hover.

Here is an example:


Code:

<ul>
<li>
<a href="link1.html" id="link1">Link<span></span></a>
</li>
</ul>

.link a { some link height }

.link a span { display: none; }

.link a:hover span {
  position: abolute;
  top: (some link height * the number of links);
  background-image: (some image url)
  width: (image width)
  height: (image height)
}

Appearance:

------
Link1
Link2
Link3
Link4
-------
-------
Rollover Image to appear here
-------

The problem that I have is that since the rollover image is positioned absolutely, if the size of the list of links changes (IE with sub-links in the list) it slides under or over where I have the rollover image placed.
IE
------
Link1
sublink1
sublink2
Link2
Link3
Link4
-------

will break my scheme.


Is there a way to get the span within the link to show up relative to the bottom of the <ul> element, or at the bottom of an element that contains the whole shebang?

If I cant get this to work, I'm going to be forced to adopt the existing tables/javascript based template for our site, and I'd hate hate hate to do that.

thanks.

I have a section of my application where I need a menu containing forms in a box aligned to the left. When one of these form names are clicked, I need it to unhide the div and display the proper form to the right of the menu.

This works fine in Internet Explorer, but when the forms become visible in Firefox they completely cover up the menu.

Here's what I've got:

CSS
Code:

#forms .form { display: none; position: absolute; left: 0; top: 0; }
#forms { position: relative; }

#adminbar { float: left; border: 1px solid #000; padding: 5px; position: relative; }

HTML
Code:

<div id="adminbar">
         <a href="javascript:void(0);" onclick="hide(getElementsByClassName('form')); show('software');">Software</a>
      </div>
      <div id="forms">
         <div id="software" class="form">
            <h1>Software Administration</h1>
            <form class="ttcform">
            <fieldset>
               <legend>New Software Item</legend>
               <ol>
                  <li>
                     <label>Software Name</label>
                     <input type="text" size="30" name="name"/>
                  </li>
               </ol>
            </fieldset>
            <fieldset class="submit" align="center">
               <input type="submit" name="submit" value="Create Software"/>
            </fieldset>
            </form>
            <hr>
            <form class="ttcform">
            <fieldset>
               <legend>Edit Software Item</legend>
               <ol>
                  <li>
                     <label>Software Name</label>
                     <input type="text" size="30" name="name"/>
                  </li>
               </ol>
            </fieldset>
            <fieldset class="submit" align="center">
               <input type="submit" name="submit" value="Create Software"/>
            </fieldset>
            </form>
         </div>
      </div>   

Javascript (In case you need it):
Code:

function show(el) {
   if(typeof el == 'string') {
      document.getElementById(el).style.display = 'block';
      return true;
   }
   else if(typeof el == 'object') {
      for(var i = 0; i < el.length; i++) {
         if(typeof el == 'object') {
            hide(el[i].id);
         }
         else {
            hide(el[i]);
         }
      }
      return true;
   }
   return false;
}

function hide(el) {
   if(typeof el == 'string') {
      document.getElementById(el).style.display = 'none';
      return true;
   }
   else if(typeof el == 'object') {
      for(var i = 0; i < el.length; i++) {
         if(typeof el == 'object') {
            hide(el[i].id);
         }
         else {
            hide(el[i]);
         }
      }
      return true;
   }
   return false;
}

function getElementsByClassName(className) {  
   var retEls = [];
   var els = document.getElementsByTagName('*');
   for(var i = 0; i < els.length; i++) {
      if(els[i].className == className) {
         retEls.push(els[i]);
      }
   }
   return retEls
}

Hey everyone,

I remember once reading an article on positioning everything relative when doing a float site using CSS. The problem is, if I do something like:
css Code:
Original - css Code html *{ position:relative; }

  

  


 html *{


 position:relative;


 } 

It seems to only apply relative positioning to absolutely nothing. Then if I do something like:
css Code:
Original - css Code html * *{ position:relative; }

  

  


 html * *{


 position:relative;


 } 

It seems to apply anything that is an immediate child of <body> Now the real problem is, if I do something like:
css Code:
Original - css Code html * * *{ position:relative; }

  

  


 html * * *{


 position:relative;


 } 

It seems to only apply the relative positioning to grandchildren of <body>. That is to say children of children of <body>. IE:
html4strict Code:
Original - html4strict Code <body> <div><!-- not relative --> <p><!-- is relative --> </div> </body>

  

  


 <body>


 <div><!-- not relative -->


 <p><!-- is relative -->


 </div>


 </body> 

Is there way to easily set it up so that everything is relatively positioned?

Sorry if this has been discussed, I can't seem to find it if it has been. I'm attempting to absolutely display several <div> tags, with padding and a set width/height. However, when I place them side by side, the borders overlap, and the width/height is larger than the values I've assigned. Is there some sort of formula to calculate the left, top, width and height values to make it so they do not overlap, the padding is applied, and the correct width/height is displayed (cross-browser, back to at least IE 6)? Thanks!

Hi

I need to create a base box with 9 sub elements, four boxes in each of the four corners, four edges between the corners and a center box. The problem I'm having is that I can only position the corner and edge boxes precisely if I make the base box absolute and position the sub boxes absolutely.

The problem with this though is that the base box "offsetHeight" property never grows when items are added to it. The items appear in their correct position but the base box height is always zero. The only time the base box changes size is if I add text to it. Is there no way to create a box with precisely positioned sub elements that grows in depth in response to added sub divs?

Thanks for any help.

Can someone tell me how z-index calculated on two elements that are both absolute position

I've been playing around with centering an absolutely positioned div and in this post is the method I've come up with. I've tested it in firefox and IE but am curious as to whether it works in opera and if there are better ways of doing it.

The div needs to be absolutely positioned because I'm using top & bottom to set it's height.

Here's the code

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" lang="en" xml:lang="en">
<head>
<title>Center Test</title>
<style>
	body
	{
		margin: 0px;
		height: 100%;
	}

	.centered
	{
		position: absolute;
		border: 2px solid black;
		width: 196px;
		background: orange;
		margin: auto;
		top: 100px;
		left: 0px;
		right: 0px;
		bottom: 100px;
		min-height: 50px;		
		height: expression((document.body.clientHeight < 250 ? 50 : document.body.clientHeight - 200 ) + 'px');
		left: expression('auto');
		right: expression(((document.body.clientWidth < 200 ? document.body.clientWidth - 200: document.body.clientWidth / 2 - 100 )) + 'px');				
	}
</style>
</head>
<body>
	<div class='centered'>
		I'm a centered absolutely positioned div.
	</div>
</body>
</html>

What causes this? I have my small login form absolutely positioned relative to the content div, and it displays differently when there is/isn't content in it...

have a look
Test

you can click the link to remove the data and position the bitlogin div as it is supposed to be... when the content is added, the bitlogin div moves down approx. 13px...

What's the deal?

I have having issues with IE displaying my page wrong.

The page is http://]http://tampabay-online.org/cetr/about.php (or any page within that site)

and the css can be found at
http://tampabay-online.org/cetr/cetr.css

It displays fine in Firefox and Opera but IE makes the content class lower from the top than the #right navigation bar (they should both be 20 pixels form the top)

Any help much appreciated.

Code:

.content {
	position:relative;
	width:320px;
	margin-left: 125px;
	margin-top: 20px;
	border:1px solid black;
	background-color:white;
	padding:10px;
	z-index:3;
}

#right {

	position:absolute;
	width:200px;
	top:20px;
	left:500px;
	border:1px solid black;
	background-color:white;
	padding:10px;
	z-index:1;

}

Hi there,

I'm completely new to CSS. I'm trying to do this more than one hour but can't get it right.

Code:

<font color='white'><font size='1' face=verdana size=1>

I couldn't find the equivalent of this in CSS

This is my last experiment but it doesn't seem to work either

Code:

fontstyle { color : #FFFFFF; font-family : verdana ; font-size :1;}

Thanks

So when using Netscape 7.2 & Opera 7.5 and MSIE 6.0,


How do you get a simple tag like

body {
font-size:small;
}

to be equal in all browsers?

Setting IE Text Size to Medium, and Opera's Zoom to 100% (both defaults) and Netscape 7.2 to 120% (not the default) is one way, but is there a CSS way?

By the way, the child element hack "body>div {property}" wasn't working no matter what I tried, by not working I mean to say Netscape never would read it or apply it.

It appeared to be that Opera & IE need to read the same value while Netscape needs to apply a larger size to be equal to IE's and Opera's rendering.

B

I could see this as potentially being really easy to do or really hard to do. I'm hoping for the former. Suppose I have 3 divs, A, B, C and that I want the total width of A + B + C to equal the width of the screen. Suppose also that I want them to be inline. How can I have B to be a fixed width while A and C expand depending on the screen width (such that the width of A = the width of C)?

I've run into yet another IE "feature" that i'd like to ask you, dear colleagues, how to solve.

I have a relatively positioned div and i need to absolute position another div inside of it to fill almost all width and height of the parent. I need it to have a 20px margin from top and bottom. Here's what works in real browsers:

Code:

.somediv{
position: absolute;
left: 0;
top: 20px;
bottom: 20px;
right: 0;
}

Now how do i make it work in a developer's nightmare IE?

There are 2 more divs in top and bottom both 20px high so the new div shouldn't overlap with them.

Hello all! My first post here. I have recently started working with wordpress with the catalyst dynamik child theme.

I am trying to "copy" some theme i found on the internet just to see if i can and maybe learn something on the way. I know some basic CSS and HTML but nothing fancy im learning as i go.

My problem is that i have used custom widget area hook to create a widget area after header (catalyst_hook_after_after_header) named it selected a layout (homepage so it shows on the home page) and i have named or assigned "sshook" class to it.

The widget are appeared under the header and i added php text widget to it so i can use shortcode like [easingslider] for my slideshow plugin. So ok all that worked out and now i have a slideshow hooked in the widget area under the header.

The problem is as follows. The container (?) that is behind the slideshow (.sshook) should be as wide as the page but it isnt. If i set the width to 100% it looks like it ignores it (nothing happens) i have also tried adding !important to it just to make sure it didnt inherit the width from some other element but it didnt work.

This is the code i made:

.sshook {
width: 100% !important;
margin: 0px 0px 0px -500px;
padding: 0px 0px 0px 500px;
background: rgb(226, 227, 227);
}

Margin goes -500 so that it pulls the background behind the slideshow all the way to the left border of the page and the padding 500 places the slideshow back at the center of the page but the only way i can get the background to show on the right side of the slideshow is to change width from % to px like 1400px but then it is not always spaning the whole page for people with higher resolution and if someone has lower resolution it adds a scroll bar at the bottom of the page because it goes more to the right.

I hope someone understands what i am trying to ask here. If anyone needs clarification on any of this let me know and ill clarify.