Back To Website Design Forum

Layers/CSS driving me NUTS!

  • Zpoon
  • Novice
  • Novice
  • User avatar
  • Joined: Mar 20, 2004
  • Posts: 32
  • Loc: Norway
  • Status: Offline

Post April 7th, 2004, 3:18 pm

http://ariel.norlinux.com/~philodox/dogs/

Why does not the main DIV expand downwards as the content does so?

My CSS code:

Code: [ Select ]
body {
    margin: 0;
    padding: 0;
    color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: x-small;
    width: 100%;
    height: 100%;
}

.main {
    background-image: url(images/styleset1/bg1.gif);
    background-position: top;
    background-repeat: repeat-x;
    position: absolute;
    background-color: #EEEEEE;
    color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    width: 100%;
    height: 100%;
}

.head {
    background-color: #F1F1F1;
    z-index: 1;
    position: absolute;
    width: 50%;
    height: 120px;
    left: 25%;
    right: 25%;
    top: 0px;
    color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.content {
    background-color: #F1F1F1;
    z-index: 2;
    position: absolute;
    width: 50%;
    height: inherit;
    left: 25%;
    right: 25%;
    top: 120px;
    bottom: 16px;
    color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.content2 {
    padding: 15px 0px 15px 0px;
}

.foot {
    background-color: #F1F1F1;
    z-index: 3;
    position: absolute;
    width: 50%;
    left: 25%;
    right: 25%;
    bottom: 0px;
    height: 16px;
    color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.border_left {
    background-image: url(images/styleset1/border.png);
    background-repeat: repeat-y;
    height: 100%;
    width: 15px;
    position: absolute;
    left: 25%;
    top: 0px;
    bottom: 0px;
    z-index: 4;
}

.border_right {
    background-image: url(images/styleset1/border.png);
    background-repeat: repeat-y;
    height: 100%;
    width: 15px;
    position: absolute;
    right: 24%;
    top: 0px;
    bottom: 0px;
    z-index: 5;
}

.header {
    background-image: url(images/styleset1/head.jpg);
    background-repeat: no-repeat;
    background-position: center;
    width: 40%;
    position: absolute;
    left: 30%;
    right: 30;
    top: 0px;
    z-index: 6;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
}

.linkbox1 {
    padding: 5px 7px 5px 7px;
    border-left: 1px dashed #777777;
    border-right: 1px dashed #777777;
    border-top: 1px dashed #777777;
    border-bottom: 1px dashed #777777;
    position: absolute;
    z-index: 7;
    left: 27%;
    top: 200px;
    width: 20%;
  height: 200px;
    overflow: auto;
}

.linkbox2 {
    padding: 5px 7px 5px 7px;
    border-left: 1px dashed #777777;
    border-right: 1px dashed #777777;
    border-top: 1px dashed #777777;
    border-bottom: 1px dashed #777777;
    position: absolute;
    z-index: 8;
    right: 27%;
    top: 200px;
    width: 20%;
}

.h1 {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-weight: 600;
}
  1. body {
  2.     margin: 0;
  3.     padding: 0;
  4.     color: #000000;
  5.     font-family: Verdana, Arial, Helvetica, sans-serif;
  6.     font-size: x-small;
  7.     width: 100%;
  8.     height: 100%;
  9. }
  11. .main {
  12.     background-image: url(images/styleset1/bg1.gif);
  13.     background-position: top;
  14.     background-repeat: repeat-x;
  15.     position: absolute;
  16.     background-color: #EEEEEE;
  17.     color: #000000;
  18.     font-family: Verdana, Arial, Helvetica, sans-serif;
  19.     width: 100%;
  20.     height: 100%;
  21. }
  23. .head {
  24.     background-color: #F1F1F1;
  25.     z-index: 1;
  26.     position: absolute;
  27.     width: 50%;
  28.     height: 120px;
  29.     left: 25%;
  30.     right: 25%;
  31.     top: 0px;
  32.     color: #000000;
  33.     font-family: Verdana, Arial, Helvetica, sans-serif;
  34. }
  36. .content {
  37.     background-color: #F1F1F1;
  38.     z-index: 2;
  39.     position: absolute;
  40.     width: 50%;
  41.     height: inherit;
  42.     left: 25%;
  43.     right: 25%;
  44.     top: 120px;
  45.     bottom: 16px;
  46.     color: #000000;
  47.     font-family: Verdana, Arial, Helvetica, sans-serif;
  48. }
  50. .content2 {
  51.     padding: 15px 0px 15px 0px;
  52. }
  54. .foot {
  55.     background-color: #F1F1F1;
  56.     z-index: 3;
  57.     position: absolute;
  58.     width: 50%;
  59.     left: 25%;
  60.     right: 25%;
  61.     bottom: 0px;
  62.     height: 16px;
  63.     color: #000000;
  64.     font-family: Verdana, Arial, Helvetica, sans-serif;
  65. }
  67. .border_left {
  68.     background-image: url(images/styleset1/border.png);
  69.     background-repeat: repeat-y;
  70.     height: 100%;
  71.     width: 15px;
  72.     position: absolute;
  73.     left: 25%;
  74.     top: 0px;
  75.     bottom: 0px;
  76.     z-index: 4;
  77. }
  79. .border_right {
  80.     background-image: url(images/styleset1/border.png);
  81.     background-repeat: repeat-y;
  82.     height: 100%;
  83.     width: 15px;
  84.     position: absolute;
  85.     right: 24%;
  86.     top: 0px;
  87.     bottom: 0px;
  88.     z-index: 5;
  89. }
  91. .header {
  92.     background-image: url(images/styleset1/head.jpg);
  93.     background-repeat: no-repeat;
  94.     background-position: center;
  95.     width: 40%;
  96.     position: absolute;
  97.     left: 30%;
  98.     right: 30;
  99.     top: 0px;
  100.     z-index: 6;
  101.     border-left: 1px solid #000000;
  102.     border-right: 1px solid #000000;
  103.     border-bottom: 1px solid #000000;
  104. }
  106. .linkbox1 {
  107.     padding: 5px 7px 5px 7px;
  108.     border-left: 1px dashed #777777;
  109.     border-right: 1px dashed #777777;
  110.     border-top: 1px dashed #777777;
  111.     border-bottom: 1px dashed #777777;
  112.     position: absolute;
  113.     z-index: 7;
  114.     left: 27%;
  115.     top: 200px;
  116.     width: 20%;
  117.   height: 200px;
  118.     overflow: auto;
  119. }
  121. .linkbox2 {
  122.     padding: 5px 7px 5px 7px;
  123.     border-left: 1px dashed #777777;
  124.     border-right: 1px dashed #777777;
  125.     border-top: 1px dashed #777777;
  126.     border-bottom: 1px dashed #777777;
  127.     position: absolute;
  128.     z-index: 8;
  129.     right: 27%;
  130.     top: 200px;
  131.     width: 20%;
  132. }
  134. .h1 {
  135.     font-family: Geneva, Arial, Helvetica, sans-serif;
  136.     font-weight: 600;
  137. }


Anyone have Ideas?
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post April 7th, 2004, 3:18 pm

  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Joined: Jun 15, 2003
  • Posts: 4583
  • Loc: Maryland
  • Status: Offline

Post April 7th, 2004, 3:35 pm

Which one is your main div? You could try
Code: [ Select ]
height : auto;
Pixel Acres V2
  • Zpoon
  • Novice
  • Novice
  • User avatar
  • Joined: Mar 20, 2004
  • Posts: 32
  • Loc: Norway
  • Status: Offline

Post April 7th, 2004, 3:38 pm

tried that, didn't help...

Code: [ Select ]
.content {
  background-color: #F1F1F1;
  z-index: 2;
  position: absolute;
  width: 50%;
  height: inherit;
  left: 25%;
  right: 25%;
  top: 120px;
  bottom: 16px;
  color: #000000;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}
  1. .content {
  2.   background-color: #F1F1F1;
  3.   z-index: 2;
  4.   position: absolute;
  5.   width: 50%;
  6.   height: inherit;
  7.   left: 25%;
  8.   right: 25%;
  9.   top: 120px;
  10.   bottom: 16px;
  11.   color: #000000;
  12.   font-family: Verdana, Arial, Helvetica, sans-serif;
  13. }


this is the one I need to expand i think...
I've tried height: 100%, height: auto and height: inherit
none of them worked
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Joined: Jun 15, 2003
  • Posts: 4583
  • Loc: Maryland
  • Status: Offline

Post April 7th, 2004, 3:45 pm

well right now the "content" div only has text nested in it, nothing else.
Pixel Acres V2
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post April 8th, 2004, 12:28 pm

I haven't investigate thoroughly, but when you use positioning in CSS it takes the object out of the normal render flow. So, while the content may be nested doesn't get included in the dimensions of the containing DIV.
- dM

Page 1 of 1

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: roelof and 129 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
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.