Avatar billede thomas-k Nybegynder
27. maj 2007 - 22:35 Der er 4 kommentarer og
1 løsning

Height med float

Jeg er ved at lave en side, hvor jeg anvender css med float. Her vil jeg gerne have at de to float elementer skal være lige høje uanset indhold. Jeg kan lavet to eksempler herunder, hvor man kan se hvorledes det ser ud nu, alt efter hvilken side der har mest indhold:

http://tec-mtl.dk/height/venstre.asp
http://tec-mtl.dk/height/hojre.asp

Derfor vil jeg spørge hvorledes jeg kan få begge float elementer til at være lige høje, uanset om venstre side har mest indhold eller ej. Jeg trode height:100% ville hjælpe, men ak...

Min css fil ser således ud:
#wrapper {
text-align: left;
margin: 0px auto;
padding: 0px;
width: 754px;
BORDER: black 1px solid;
background-color: #dbdbdb;
}

#midtenvenstre  {
margin: 0;
float: left;
width: 110px;
background-color: red;
font: 11px/14px verdana,sans-serif;
font-weight: 500;
color: black;
text-align: left;
height:100%;
}

#midten {
border-left: 1px solid;
margin: 0;
float: right;
width: 643px;
background-color: #ffffff;
font: 11px/14px verdana,sans-serif;
font-weight: 500;
color: black;
text-align: left;
height:100%;
}
Avatar billede w13 Novice
28. maj 2007 - 01:09 #1
Det er desværre ikke så let. En metode kunne være at lave en baggrund, der ligner venstre og højre div i dit eksempel, sådan at den kan lægges bagved.
Ved venstre element skulle den så være rød i dit eksempel og hvid ved den højre.
Avatar billede notes2c Nybegynder
28. maj 2007 - 02:06 #2
Alternativet er at benytte lidt jeavscript til at synkronicere højden. Og desuden har du en doctype formeget, den ene skal du fjerne...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<base href="http://tec-mtl.dk/height/" />
<link href="miss.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
var elms = ['midtenvenstre','midten'];

function synchronizeDivs(){
    var maxH = 0;//minimumshøjde
    for(i=0;elms.length>i;i++){
        maxH = Math.max(maxH,document.getElementById(elms[i]).offsetHeight);
    }
    for(i=0;elms.length>i;i++){
        document.getElementById(elms[i]).style.height=maxH + 'px';
    }
}
// -->
</script>

</head>
<body onload="synchronizeDivs()"><center>


<div id='wrapper'>

<div id='midtenvenstre'>

linieskift<br />
linieskift<br />
linieskift<br />
linieskift<br />
linieskift<br />
linieskift<br />
linieskift<br />
linieskift<br />
linieskift<br />
linieskift<br />
linieskift<br />
linieskift<br />
linieskift<br />
linieskift<br />
linieskift<br />
linieskift<br />
linieskift<br />
linieskift<br />
linieskift<br />
linieskift<br />

</div>


<div id='midten'>




linieskift<br />
linieskift<br />linieskift<br />
linieskift<br />

</div>
</div>

</body>
</html>
Avatar billede w13 Novice
28. maj 2007 - 02:08 #3
Se, dét er en go' løsning! :)
Avatar billede thomas-k Nybegynder
28. maj 2007 - 02:19 #4
Ja, helt enig med w13. Det var sq rigtig smart :-) Tusind takker notes2c, like a glove!
Avatar billede notes2c Nybegynder
28. maj 2007 - 02:25 #5
Fint... Nat og sov godt...
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