CSS Absolute position DIV's question

  • manelmpereira
  • Born
  • Born
  • manelmpereira
  • Posts: 4

Post 3+ Months Ago

Hello,

I've been having a few problems with nested div's, when absolute positioned.

I've tried a few solutions presented, but they were only directed towards div's which were floating left or right, never absolute positioned.

Here's an example of what I mean.

Code: [ Select ]
 
<html>
<head>
<style>
#container
{
  border: 1px solid red;
  width: 600px;
  padding: 15px;
}
#abs_left
{
  position: absolute;
  width: 400px;
  height: 200px;
  border: 1px solid blue;
}
#abs_right
{
  position: absolute;
  margin: 0 0 0 405px;
  width: 190px;
  height: 150px;
  border: 1px solid green;
}
</style>
</head>
<body>
 
<div id="container">
  <div id="abs_left"></div>
  <div id="abs_right"></div>
</div>
 
</body>
</html>
 
  1.  
  2. <html>
  3. <head>
  4. <style>
  5. #container
  6. {
  7.   border: 1px solid red;
  8.   width: 600px;
  9.   padding: 15px;
  10. }
  11. #abs_left
  12. {
  13.   position: absolute;
  14.   width: 400px;
  15.   height: 200px;
  16.   border: 1px solid blue;
  17. }
  18. #abs_right
  19. {
  20.   position: absolute;
  21.   margin: 0 0 0 405px;
  22.   width: 190px;
  23.   height: 150px;
  24.   border: 1px solid green;
  25. }
  26. </style>
  27. </head>
  28. <body>
  29.  
  30. <div id="container">
  31.   <div id="abs_left"></div>
  32.   <div id="abs_right"></div>
  33. </div>
  34.  
  35. </body>
  36. </html>
  37.  


The div "container" doesn't expand to contain the div's "abs_left" and "abs_right".

Is there any solution? This is intended to be dinamically generated, so I cannot explicitly tell the container's height.

Thanks in advance!
Manuel
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Absolute positioning takes the element out of the render flow. This means that the parent and sibling elements won't react to it. I think you should look for a different approach.
  • manelmpereira
  • Born
  • Born
  • manelmpereira
  • Posts: 4

Post 3+ Months Ago

Thanks for the reply. I'll see what I can do to change it.

Cheers,
Manuel
  • manelmpereira
  • Born
  • Born
  • manelmpereira
  • Posts: 4

Post 3+ Months Ago

Hi again,

I modified my css, not to use position: absolute, and I got the same result using float: left on the various blocks.

It looks right in Firefox, but in IE (7 at least), I can't get the blocks to overlap.

This is the code:

Code: [ Select ]
 
<html>
<head>
<style>
#container
{
  border: 1px solid red;
  width: 605px;
  padding: 15px;
}
#abs_left
{
  float: left;
  width: 400px;
  height: 200px;
  border: 1px solid blue;
  z-index: 2;
}
#abs_middle
{
  float: left;
  width: 50px;
  height: 150px;
  border: 1px solid green;
  z-index: 2;
}
#abs_right
{
  float: left;
  width: 135px;
  height: 250px;
  border: 1px solid yellow;
  z-index: 2;
}
#abs_bottom
{
  margin: 220px 0 0 0;
  width: 595px;
  height: 150px;
  border: 1px solid black;
}
</style>
</head>
<body>
 
<div id="container">
  <div id="abs_left"></div>
  <div id="abs_middle"></div>
  <div id="abs_right"></div>
  <div id="abs_bottom"></div>
</div>
 
</body>
</html>
 
  1.  
  2. <html>
  3. <head>
  4. <style>
  5. #container
  6. {
  7.   border: 1px solid red;
  8.   width: 605px;
  9.   padding: 15px;
  10. }
  11. #abs_left
  12. {
  13.   float: left;
  14.   width: 400px;
  15.   height: 200px;
  16.   border: 1px solid blue;
  17.   z-index: 2;
  18. }
  19. #abs_middle
  20. {
  21.   float: left;
  22.   width: 50px;
  23.   height: 150px;
  24.   border: 1px solid green;
  25.   z-index: 2;
  26. }
  27. #abs_right
  28. {
  29.   float: left;
  30.   width: 135px;
  31.   height: 250px;
  32.   border: 1px solid yellow;
  33.   z-index: 2;
  34. }
  35. #abs_bottom
  36. {
  37.   margin: 220px 0 0 0;
  38.   width: 595px;
  39.   height: 150px;
  40.   border: 1px solid black;
  41. }
  42. </style>
  43. </head>
  44. <body>
  45.  
  46. <div id="container">
  47.   <div id="abs_left"></div>
  48.   <div id="abs_middle"></div>
  49.   <div id="abs_right"></div>
  50.   <div id="abs_bottom"></div>
  51. </div>
  52.  
  53. </body>
  54. </html>
  55.  


Any suggestions?

Thanks again.
Manuel
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Try this...
Code: [ Select ]
<html>
<head>
<style>
#container
{
position: relative;
border: 1px solid red;
width: 600px;
padding: 15px;
}
#abs_left
{
position: absolute;
width: 400px;
height: 100%;
border: 1px solid blue;
float: left;
}
#abs_right
{
float: left;
width: 190px;
height: 150px;
border: 1px solid green;
}
</style>
</head>
<body>

<div id="container">
<div id="abs_left"></div>
<div id="abs_right"></div>
<p style="clear: both;" />
</div>

</body>
</html>
  1. <html>
  2. <head>
  3. <style>
  4. #container
  5. {
  6. position: relative;
  7. border: 1px solid red;
  8. width: 600px;
  9. padding: 15px;
  10. }
  11. #abs_left
  12. {
  13. position: absolute;
  14. width: 400px;
  15. height: 100%;
  16. border: 1px solid blue;
  17. float: left;
  18. }
  19. #abs_right
  20. {
  21. float: left;
  22. width: 190px;
  23. height: 150px;
  24. border: 1px solid green;
  25. }
  26. </style>
  27. </head>
  28. <body>
  29. <div id="container">
  30. <div id="abs_left"></div>
  31. <div id="abs_right"></div>
  32. <p style="clear: both;" />
  33. </div>
  34. </body>
  35. </html>
  • manelmpereira
  • Born
  • Born
  • manelmpereira
  • Posts: 4

Post 3+ Months Ago

Thanks for the reply, but i found out that whenever a div has the position:absolute; attribute, then all it's parents cease to know it's condition, so they can never expand to it's size.

The only solution for what I'm trying to do is to specify the container height... I think it's the only way...

Thanks anyway.
Manuel
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Have you tried my way?

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 76 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.