Layers/CSS driving me NUTS!

  • Zpoon
  • Novice
  • Novice
  • User avatar
  • Posts: 32
  • Loc: Norway

Post 3+ Months Ago

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


Anyone have Ideas?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

Which one is your main div? You could try
Code: [ Select ]
height : auto;
  • Zpoon
  • Novice
  • Novice
  • User avatar
  • Posts: 32
  • Loc: Norway

Post 3+ Months Ago

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
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

well right now the "content" div only has text nested in it, nothing else.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

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.

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 71 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.