Problemer med div-bokse...

Hejsa...

Har gennem et stykke til haft problemer med div-bokse, som jeg prøver at positionere. Jeg vil have mit vindue delt op i 4 div-bokse. En i toppen, en i bunden, og 2 i rummet imellem dem (altså én til menu og en til selve inholdet).

Problemet er, at når jeg har positioneret de 2 Div-bokse i bunden og i toppen med position: absolute; i min CSS-fil, så når jeg opretter de 2 mellemste div-bokse og giver dem 100% i height og 50% i width, så bliver de ikke puttet "imellem" top og bund-divet, men de fylder hele siden - og bagved top og bund-divet. dvs, det første af min menu-tekst står under top-divet og kan ikke ses.

Hvordan får jeg min 2 mellemste DIV-bokse til at rette sig efter mine andre 2 DIV-bokse der er positioneret absolute?

KODE HTML:

Kode 

<div class="topdiv">   </div>

 <div class="leftdiv">  </div>

<div class="rightdiv"> </div>

<div class="bunddiv">  </div>

CSS:

Kode 

.topdiv
{
     position: absolute;
     top: 0;
     height: 100px;
     width: 100%x;
     background-color: yellow;
}

.leftdiv
{
     background-color: red;
     height: 100%;
     width: 50%;
}

.rightdiv
{
     background-color: red;
     height: 100%;
     width: 50%;
}



.bunddiv
{
     position: absolute;
     bottom: 0;
     height: 100px;
     width: 100%;
     background-color: blue;
}

Du kan også gøre det ved at benytte float.. På den måde får du også boksene til automatisk at udvide sig efter indholdet..

Det kan du gøre ved at skifte dit stylesheet ud med følgende kode:

.topdiv
{
     height: 100px;
     background-color: yellow;
}

.leftdiv
{
     background-color: red;
     height: 100%;
     width: 50%;
     float: left;
}

.rightdiv
{
     background-color: red;
     height: 100%;
     width: 50%;
     float:left;
}



.bunddiv
{
     height: 100px;
     width: 100%;
     clear:left;
     background-color: blue;
}

Håber du kan få det til at virke..

- Mads

[Redigeret d. 10/09-05 17:32:02 af Mads]

Halløjsa....

Det løser en del af problemerne.. men problemet nu er bare, at de mellemste DIV bokse bliver 100% i height og så kommer top og bund DIV'ets højder jo med ovenpå og nedenunder de mellemste DIV'er.. så siden er faktisk længere end browser-vinduet, så man skal scrolle ned. Det må det helst ikke gøre. Det skal regnes ud, så det passer perfekt til siden..

anyone?

på forhånd tak

Hej igen.

til alle de mange mennesker, der har haft samme problemer som mig, vil jeg lige poste hvad jeg i den seneste uge har fundet ud af. Det er simpelthen ikke muligt i IE at have en DIV boks med faste pizels, og en anden nedenunder, som automatisk fylder resten af skærmen. At sætte height til auto vil kun gøre boksen så stoir som indholdet af den... at sætte height: 100% vil gøre boksen så høj som hele skærmen og oveni vil så komme den anden boks med faste pixels.

Det eneste der er at gøre er, at man må lave boksen der skal "fylde resten" først og sætte dens height til 100% i sin CSS-fil. Derefter skal man give den en margin-top der svarer til det antal pixels, som ens øverste DIV med faste pixels skal have. Dvs. at den boks der har 100% i height i teorien fylder hele skærmen, men indholdet i den starter først længere nede. Derefter er det bare at placere sin DIV med faste pixels med absolute positioning, så den ligger ovenpå den anden boks - og tilogmed der, hvor den anden boks har sin margin.

På den måde løser man problemet, og det virker i alle explorers.
Håber det hjælper. Har prøvet 100.000 muligheder nu, og søgt alverdens hjemmesider og alle steder er svaret det samme.