Kan jeg få en div til å flytte seg nedover når diven over blir høyere?

[Mastiff]

I nettsiden som styrer huset mitt har jeg øverst en ramme der det vises hva som blir spilt i de forskjellige sonene (for eksempel "Kjøkken:NRK P1 - 30 km fra NM på ski", der sonen og radiokanalen kommer fra mitt eget system, mens radioteksten hentes ut av nettradioprogrammet). Det går greit hvis én eller to soner spiller, men når det blir flere soner som spiller, flyter den sammen med div-en under, som er en tabell over sonene med ikoner for radiokanaler og av/på med forsterker. Under den igjen er det en div som inneholder forsterkerfunksjoner (volum, demp, inngangsvalg og så videre). Jeg prøvde å wrappe de to nederste div-ene i en div utenpå, men uansett hva jeg bruker i position på CSS (relative osv.) så forholder det seg bare til selve nettsiden, og ikke til diven over. Går det an å få til det jeg vil gjøre? Hvis det ble forklart godt nok til at det er forståelig, altså... En liten oversikt:

 

Div 1. Variabel høyde med avspillingsinfo.

 

Div 2

Underdiv 1 Fast høyde med radiokanalvalg

Underdiv 2 Fast høyde med forsterkerkontroll

[xaco]

Kan du poste CSSen og HTML for siden?

[Mastiff]

HTML vil nok ikke hjelpe så mye, så å si alt sammen er dynamisk generert i tabeller av Girder (et program for hjemmeautomatisering). Men selve HTML-opplegget er sånn:

<p style="font-family:arial;font-size:200%;color:black;text-align:left;margin-left:400;margin-top:-50">Forsterkere og radiokanaler</p>

<div id="avspillingstabellWrapper">
<div id="avspillingstabell"></div>
</div>

<div id="WrapperWrapper">
<div id="radiokanaltabellWrapper">
<div id="radiokanaltabellTittel"></div>
<div id="radiokanaltabell"></div>
</div>

<div id="forsterkertabellWrapper">
<div id="forsterkertabellTittel"></div>
<div id="forsterkertabell"></div>
</div>

</div>

Og CSS-en er sånn:

body {
	background-image: url(/img/background.jpg);
	background-size: cover;
	background-repeat: repeat;
    background-color: white;
    margin: 0;
}

#floating-menu{
background-image: url("/img/sun.jpg");
background-size:contain;
margin-left: 5px;
text-align:left;
line-height: 5px;
text-indent: 5px;
font-size: 14pt;
color:white;
left: 300px;
border:6px double rgb(201, 0, 1);
width:200px;
z-index:2;
text-decoration: none;
}

#floating-menu a:link {color: white;}

#floating-menu a:visited  {color: white;}
#floating-menu a:hover {color: yellow;} 

/* ------------------------------------------------------------------------------------------------------------------------------------------ */
 
#avspillingstabellWrapper {
position: absolute;
margin-top: 0px;
}
  
#avspillingstabell {
border-spacing: 0px;
empty-cells:hide;
width: 1164px;
border:6px solid red;
overflow: hidden;
display: inline-block;
border-collapse: collapse;
}

#avspillingstabell td {
border-style: none;
padding: 0px;
height: 0px;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------ */  

#WrapperWrapper {
position: relative;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------ */  

#radiokanaltabellWrapper {
position: absolute;
margin-top: 50px;
}
  
#radiokanaltabellTittel {
position: absolute;
border:6px solid red;
z-index:1;
top: 0;
left: 0;
background: white;
display: inline-block;
}

#radiokanaltabellTittel td{
width: 118px;
}

#radiokanaltabellTittel tr:first-child td {
text-align:center;
}

#radiokanaltabellTittel td {
border-bottom:3px dotted red;
vertical-align:middle;
color:black;
height: 60px;
}

#radiokanaltabellTittel tr:last-child td {
  border-bottom: none;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------ */

#radiokanaltabell {
border:6px solid red;
margin-left: 136px;
overflow: hidden;
display: inline-block;
border-collapse: collapse;
}

#radiokanaltabell td {
text-align:center;
border-bottom:3px dotted red;
vertical-align:middle;
color:black;
height: 60px;
border-spacing: 0px 0px;
}

#radiokanaltabell tr:last-child td {
  border-bottom: none;
 }

#radiokanaltabell td:first-child {
	display:none;
}

#radiokanaltabell td:nth-child(2) {
	display:none;
}

#radiokanaltabell tbody td:nth-child(3) {
background-image: url("/img/radio/forsterker.png");
background-repeat: no-repeat;
background-position: center; 
width: 50px;
}

#radiokanaltabell tbody td:nth-child(4) {
background-image: url("/img/radio/p1.png");
background-repeat: no-repeat;
background-position: center; 
width: 50px;
}

#radiokanaltabell tbody td:nth-child(5) {
background-image: url("/img/radio/p2.png");
background-repeat: no-repeat;
background-position: center; 
width: 50px;
}


#radiokanaltabell tbody td:nth-child(6) {
background-image: url("/img/radio/p3.png");
background-repeat: no-repeat;
background-position: center; 
width: 50px;
}

#radiokanaltabell tbody td:nth-child(7) {
background-image: url("/img/radio/p4.png");
background-repeat: no-repeat;
background-position: center; 
width: 50px;
}

#radiokanaltabell tbody td:nth-child(8) {
background-image: url("/img/radio/mp3.png");
background-repeat: no-repeat;
background-position: center; 
width: 50px;
}

#radiokanaltabell tbody td:nth-child(9) {
background-image: url("/img/radio/alltidnyheter.png");
background-repeat: no-repeat;
background-position: center; 
width: 50px;
}

#radiokanaltabell tbody td:nth-child(10) {
background-image: url("/img/radio/nrkjazz.png");
background-repeat: no-repeat;
background-position: center; 
width: 50px;
}

#radiokanaltabell tbody td:nth-child(11) {
background-image: url("/img/radio/nrksport.png");
background-repeat: no-repeat;
background-position: center; 
width: 50px;
}

#radiokanaltabell tbody td:nth-child(12) {
background-image: url("/img/radio/p1pluss.png");
background-repeat: no-repeat;
background-position: center; 
width: 50px;
}

#radiokanaltabell tbody td:nth-child(13) {
background-image: url("/img/radio/p6.png");
background-repeat: no-repeat;
background-position: center; 
width: 50px;
}

#radiokanaltabell tbody td:nth-child(14) {
background-image: url("/img/radio/p13.png");
background-repeat: no-repeat;
background-position: center; 
width: 50px;
}

#radiokanaltabell tbody td:nth-child(15) {
background-image: url("/img/radio/radiorock.png");
background-repeat: no-repeat;
background-position: center; 
width: 50px;
}

#radiokanaltabell tbody td:nth-child(16) {
background-image: url("/img/radio/kiss.png");
background-repeat: no-repeat;
background-position: center; 
width: 50px;
}

#radiokanaltabell tbody td:nth-child(17) {
background-image: url("/img/radio/jrmc.png");
background-repeat: no-repeat;
background-position: center; 
width: 50px;
}

#radiokanaltabell tbody td:nth-child(18) {
background-image: url("/img/radio/strom.png");
background-repeat: no-repeat;
background-position: center; 
width: 50px;
}

#radiokanaltabell tbody td:nth-child(19) {
background-image: url("/img/radio/radioav.png");
background-repeat: no-repeat;
background-position: center; 
width: 50px;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------ */
 
#forsterkertabellWrapper {
position: absolute;
margin-top: 700px;
}
  
#forsterkertabellTittel {
position: absolute;
border:6px solid red;
z-index:1;
top: 0;
left: 0;
background: white;
display: inline-block;
}

#forsterkertabellTittel td{
width: 118px;
}

#forsterkertabellTittel tr:first-child td {
text-align:center;
}

#forsterkertabellTittel td {
border-bottom:3px dotted red;
vertical-align:middle;
color:black;
height: 60px;
}

#forsterkertabellTittel tr:last-child td {
  border-bottom: none;
}

#forsterkertabell {
border:6px solid red;
margin-left: 136px;
overflow: hidden;
display: inline-block;
border-collapse: collapse;
}

#forsterkertabell td {
text-align:center;
border-bottom:3px dotted red;
vertical-align:middle;
color:black;
height: 60px;
border-spacing: 0px 0px;
}

#forsterkertabell tr:last-child td {
  border-bottom: none;
 }

#forsterkertabell td:first-child {
	display:none;
}

#forsterkertabell td:nth-child(2) {
	display:none;
}

#forsterkertabell tbody td:nth-child(3) {
background-image: url("/img/radio/forsterker.png");
background-repeat: no-repeat;
background-position: center; 
width: 50px;
}

#forsterkertabell tbody td:nth-child(4) {
background-image: url("/img/radio/volumned.png");
background-repeat: no-repeat;
background-position: center; 
width: 50px;
}

#forsterkertabell tbody td:nth-child(5) {
background-image: url("/img/radio/volumopp.png");
background-repeat: no-repeat;
background-position: center; 
width: 50px;
}

#forsterkertabell tbody td:nth-child(6) {
background-image: url("/img/radio/demp.png");
background-repeat: no-repeat;
background-position: center; 
width: 50px;
}

#forsterkertabell tbody td:nth-child(7) {
background-image: url("/img/subwoofer.png");
background-repeat: no-repeat;
background-position: center; 
width: 50px;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------ */

Endret 5. februar 2017 av Mastiff