Avatar billede bgo Nybegynder
18. september 2008 - 10:53 Der er 13 kommentarer og
1 løsning

højde på outer div ændres kun iforhold til den ene inner div

Jeg har et lille problem med nogle divs (dét er jo så et fast emne hér ;))

Jeg har to divs som skal stå ved siden af hinanden - de to ligger i en ydre div bl.a. med det formål at en fjerde dive der er placeret under denne yder div skal rykkes ned alt efter hvor høj min førnævnte ydre div er.

Nu er problemet så, at højden på min ydre div kun retter sig efter højden på min venstre indre div, og er komplet ligeglad med højden på min højre indre div - som så kan vokse ud over den ydre divs grænse.

Jeg har prøvet at floate den højre div, med et noget alternativt resultat (sandsynligvis pga af de øvrige indstillinger i den), og jeg har prøvet et par ting jeg har fundet herinde (overflow:auto på den ydre giver blot scroll-bars, height:1% gør intet)

Nogle der kan hjælpe?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Untitled 1</title>
<style type="text/css">
#contentsleft2 {
width:758px;
position:relative;
left:0px;
top:0px;
}

#contentsright2 {
width:224px;
position:absolute;
top:0px;
left:761px;
}

#contentsouter2 {
position:relative;
top:0px;
left:0px;
}


</style>
</head>

<body>
<div id="contentsouter2">

    <div id="contentsleft2">
        g<br />
        ert<br />
    </div>
    <div id="contentsright2">
        gf<br />
        f<br />
        f<br />
        f<br />
        f<br />
    </div>
</div>

</body>

</html>
Avatar billede w13 Novice
18. september 2008 - 10:56 #1
Prøv bare at lægge <div style="clear:both"></div> nederst i den ydre div.
Avatar billede bgo Nybegynder
18. september 2008 - 11:03 #2
Det hjalp desvære ikke. Ser faktisk ud til at den ydre div slet ikke ændre størrelse af det
Avatar billede softspot Forsker
18. september 2008 - 11:30 #3
Mon ikke det er fordi du positionerer contentsright2 absolut og dermed trækker den ud af den kontekst hvor den kan påvirke contentsouter2...?

Jeg har konstrueret dette eksempel som illustrerer en alternativ løsning (jeg er ikke helt sikker på at det er der du vil hen, men sådan opfatter jeg det du skriver):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Untitled 1</title>
<style type="text/css">
#contentsleft2 {
width:758px;
position:relative;
float:left;
border:solid 1px blue;
}

#contentsright2 {
width:224px;
position:relative;
border:solid 1px red;
}

#contentsouter2 {
position:relative;
border:solid 1px black;
}

#bottombox {
border:solid 1px yellow;
}

</style>
</head>

<body>
<div id="contentsouter2">

    <div id="contentsleft2">
        g<br />
        ert<br />
    </div>
    <div id="contentsright2">
        gf<br />
        f<br />
        f<br />
        f<br />
        f<br />
    </div>
    <div id="bottombox">
      Denne ramme står i bunden
    </div>
</div>

</body>

</html>
Avatar billede softspot Forsker
18. september 2008 - 11:42 #4
Nå, det virkede så ikke i FF 2, så jeg har fedetet lidt videre med den og kommet til flg. løsning som ser ud til at fungere i både IE 7 og FF 2:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Untitled 1</title>
<style type="text/css">
#contentsouter2 {
  width:986px;
  position:relative;
  border:solid 1px black;
}

#contentsleft2 {
  width:758px;
  position:relative;
  float:left;
  border:solid 1px blue;
}

#contentsright2 {
  width:224px;
  position:relative;
  border:solid 1px red;
  float:left;
}

#bottombox {
  border:solid 1px yellow;
  clear:both;
}

</style>
</head>

<body>
<div id="contentsouter2">

    <div id="contentsleft2">
        g<br />
        ert<br />
    </div>
    <div id="contentsright2">
        gf<br />
        f<br />
        f<br />
        f<br />
        f<br />
    </div>
    <div id="bottombox">
      Denne ramme står i bunden
    </div>
</div>
<div>
  Kommer til at stå under det hele...
</div>

</body>

</html>
Avatar billede softspot Forsker
18. september 2008 - 11:44 #5
Det kræver dog at du fikserer bredden af contentsouter2, så det lige passer med bredden af de to flydende div-elementer (contentsleft2 og -right2). Jeg ved ikke om dette er uhensigtsmæssigt for dit layout, men på det oplæg du har lavet er det da en løsningsmodel :)
Avatar billede bgo Nybegynder
18. september 2008 - 11:49 #6
hehe det første eksempel gjorde faktisk ikke den store forskel ;) Der blev det blot den højre der styrede outers højde ;) Men du har vist fanget idéen, tror jeg. Jeg prøver lige med eksempel 2. Det skulle gerne være således at det er ligegyldigt hvilken af de to indre der er højest, bare det altid er den højeste der afgør hvor høj den ydre er. Og div'en under befinder sig udenfor outer-div'en (som den nederste i dit eksempel 2
Avatar billede bgo Nybegynder
18. september 2008 - 11:52 #7
se, eksempel nummer 2 ser ud til at virke fint :) Jeg prøver at få det ind i det endelige (der har jeg iøvrigt endnu en outer div som det her skal ind i - som har en fixed bredde)
Avatar billede bgo Nybegynder
18. september 2008 - 12:03 #8
hmm. Vi nærmer os. I det samlede virker det nu i IE7 og IE6, men FF3 gør den som før...

Smækker lige noget sammen med mere af kode/css
Avatar billede bgo Nybegynder
18. september 2008 - 12:19 #9
Denne her udgave virker fint i IE, men i FF er det kun højre deer afgør højden af outer2 - den venstre får faktisk det i bunden til at rykke sig til højre op under højre div.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Untitled 1</title>
<style type="text/css">
#contentsouter2 {
  width:986px;
  position:relative;
  border:solid 1px black;
}

#contentsleft2 {
  width:758px;
  position:relative;
  float:left;
  border:solid 1px blue;
}

#contentsright2 {
  width:224px;
  position:relative;
  border:solid 1px red;
  float:left;
}

#bottombox {
  border:solid 1px yellow;
  clear:both;
}

#contentsouter {
position:relative;
top:3px;
left:0px;
width:985px;
border:solid 1px green;
}

#omtopseperatorleft {
width:758px;
position:absolute;
left:0px;
top:0px;
height:148px;
border:solid 1px gray;
}

#omtopseperatorright {
width:224px;
position:absolute;
top:0px;
left:761px;
background-color:#b5121b;
height:148px;
border:solid 1px cyan;
}

#omtopseperator {
width:982px;
height:148px;
border:solid 1px pink;
}

#maincontainer {
margin-left:auto;
margin-right:auto;
width:985px;
}

</style>
</head>

<body>
<div id="maincontainer">
    <div id="contentsouter">
        <div id="omtopseperator">
            <div id="omtopseperatorleft">
                <img src="pidfotos/spacer.gif" alt="" width="757" height="148" /></div>
            <div id="omtopseperatorright"><img src="pidfotos/spacer.gif" alt="" width="1" height="148" /></div>
        </div>
        <div id="contentsouter2">
       
            <div id="contentsleft2">
                g<br />
                ert<br />
                df<br />
                df<br />
                df<br />
                df<br />
                df<br />
                df<br />
                df<br />
                f<br />
            </div>
            <div id="contentsright2">
                gf<br />
                f<br />
                f<br />
                f<br />
                f<br />
            </div>
       
        </div>
        <div>
          Kommer til at stå under det hele...
        </div>
    </div>
</div>
</body>

</html>
Avatar billede bgo Nybegynder
18. september 2008 - 12:35 #10
årh, for hulan, manglede at sætte id på den nederste. Prøver igen i det samlede
Avatar billede bgo Nybegynder
18. september 2008 - 12:54 #11
Ok, nu fik jeg FF til at makke ret også. Havde lige glemt at jeg i den rigtige CSS havde en position:absolute med i bottom. Nu er det så kun margin-top:39px; der ikke vil i FF, men gerne i IE:

#bottombox {
position:relative;
width:758px;
margin-top:39px;
clear:both;
}
Avatar billede bgo Nybegynder
18. september 2008 - 12:56 #12
softspot, smider du lige et svar :) Så er der point :)
Avatar billede softspot Forsker
18. september 2008 - 13:19 #13
Jeps! Kommer her! Velbekomme :)
Avatar billede softspot Forsker
18. september 2008 - 14:42 #14
Tak for point :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester