Jump to content

right, bottom, and nested divs


jeffman
 Share

Recommended Posts

Below is some code I wrote to test a concept because I couldn't BELIEVE what I was seeing is true. In FF, this code produces a red square nested in a gray square, ten pixels of gray showing all around. I like this because it means I don't have to know the dimensions of the red square. The right and bottom attributes just take care of it. BUT In IE7, I don't see the red unless I explicitly give it dimensions. Is this really the way things are?Yes, I can work around this by calculating the dimensions.Please tell me there is a simple alternative to get the functionality I'm looking for?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   <html>   <head>   <style type="text/css">	  div.holder{background-color: #999999; position:absolute; top: 50px; left: 50px; height: 200px; width: 200px;}	  div.contents{position:absolute; top: 10px; bottom: 10px; left: 10px; right: 10px; background-color: #AA0000;} </style>   </head>   <body>	 <div class="holder">	   <div class="contents"></div>	 </div>   </body>   </html>

Link to comment
Share on other sites

I would just give the red box a padding of 10px. That way whatever I put inside of it had 10px of padding around it.Be aware though, that this will increase the size of the red box by 20px;So if you want a 10px wide box. Set it as 5px wide with a padding of 5px all the way around.

Link to comment
Share on other sites

Ah. Perhaps some explanation is in order. I'm not interested in creating a border per se. That would not have warranted a question.The task is to start with a container of X and Y dimensions. I don't know the dimensions when I'm coding. They're generated on the fly in response to user input or the weather or something.Now, what I can do with Firefox is create a div that's nested in the container simply by specifying absolute coordinates for top, left, right, and bottom. I don't HAVE to specify width and height. This is the miracle I'm going on about. Firefox just looks at the coordinates and understands what I'm trying to do. So if I want the nested div to be Tpx from the top of the container, Lpx from the left, Rpx from the right, and Bpx from the bottom, Firefox does the math on its own and makes the nested div the correct size.This is exactly what you could do on some graph paper if I gave you four coordinates and a ruler. You could draw a rectangle and never have to calculate how big it is.I think that's cool and is exactly what I was hoping would happen when I wrote my original code. It just seems intuitive that this would be part of the function of the bottom and right attributes. And I'm not the only one who thinks so, since it works in Firefox and Safari both.But with IE, it doesn't. The nested div remains a dimensionless point located at the left and top coordinates. I've got to take the extra step, maybe with some javascript, and figure out the dimensions of the nested div. This is much less functional, in fact pretty annoying after having it work so nicely in FF. A CSS declaration is so elegant by comparison.As I said, I've got the workarounds covered.What I was hoping was that I'd missed a CSS property that would make IE work the way I'm talking about. Not that I really expected it to. But it would be nice.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...