Avatar billede rasmus_a Nybegynder
28. januar 2007 - 21:39 Der er 21 kommentarer og
1 løsning

Float: Right og højde

Hej

Jeg har lavet en side med to kolonner. Mit problem er at min container div ikke følger med min højre kolonne i højden.
CSS'en ser ud som følger:

container {
margin: 0 auto;
width: 800px;
height: 100%;
min-height: 600px;
border: 1px solid #000; }

venstre {
position: relative;
}

hoejre {
position: relative;
float: right;
}

HTML'en ser ud som følger:

<html>
<body>

<div class="container">

<div class="venstre"></div>

<div class="hoejre"></div>

</div>


Min problem er altså, at hvis indholdet i den højre kolonne er højere end i den venstre følger container'en ikke med. Derfor går border'en fra containeren altså over højre kolonne "før tid".

Hvorfor mon?

mvh
Avatar billede notes2c Nybegynder
28. januar 2007 - 22:18 #1
Kan ikke få dit eks. til at nærme sig kolonner:

Tænkte på om det var noget i den stil du tænkte på:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
html, body {
height: 100%;
}

body {
    margin: 0;
    padding: 0;
}
.container {
margin: 0 auto;
width: 800px;
height: 100%;
min-height: 600px;
border: 1px solid #000;
background: red;
}

.venstre {
background: lightblue;
float: left;
width: 50%;
height: 100%;
}

.hoejre {
background: lightgreen;
width: 50%;
height: 100%;
}

-->
</style>
<script type="text/javascript">
</script>
</head>

<body>
<div class="container">
<div class="venstre">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla in velit nec lorem posuere sollicitudin. Nam feugiat. Sed commodo suscipit arcu. Ut ante. Nunc pulvinar ante ut lectus. Donec ante tellus, tincidunt molestie, rhoncus vehicula, porta vitae, mi. Suspendisse accumsan molestie elit. Vivamus feugiat, arcu commodo gravida rhoncus, libero tortor suscipit nulla, feugiat euismod lectus sapien vitae tellus. Etiam dui erat, elementum quis, semper eu, ornare non, quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean lobortis. Nam et lacus. Quisque ligula nisl, ultrices ac, ultricies a, commodo fringilla, enim. Aenean vitae quam non nisi fringilla ornare. Cras cursus. Cras semper. In mollis tincidunt ipsum. Suspendisse potenti.</p>
<p>Phasellus tincidunt. Suspendisse lobortis orci. Nunc aliquet risus nec arcu. Phasellus sit amet metus a velit tincidunt interdum. Integer lectus metus, rhoncus a, vestibulum id, volutpat vel, tortor. Praesent commodo lorem non lacus. Sed enim. Pellentesque dapibus dui a sapien. Curabitur augue nisl, tincidunt a, mattis quis, placerat vel, leo. Nullam odio diam, faucibus interdum, suscipit ut, viverra in, arcu. In hac habitasse platea dictumst. Aliquam neque nunc, interdum id, hendrerit vitae, accumsan vitae, nisi. Nunc eget neque. Maecenas bibendum dolor. Ut a eros. In ipsum quam, lobortis ut, feugiat in, ultrices eget, eros. Ut leo diam, cursus non, molestie in, aliquet sollicitudin, mauris.</p>
</div>
<div class="hoejre">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla in velit nec lorem posuere sollicitudin. Nam feugiat. Sed commodo suscipit arcu. Ut ante. Nunc pulvinar ante ut lectus. Donec ante tellus, tincidunt molestie, rhoncus vehicula, porta vitae, mi. Suspendisse accumsan molestie elit. Vivamus feugiat, arcu commodo gravida rhoncus, libero tortor suscipit nulla, feugiat euismod lectus sapien vitae tellus. Etiam dui erat, elementum quis, semper eu, ornare non, quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean lobortis. Nam et lacus. Quisque ligula nisl, ultrices ac, ultricies a, commodo fringilla, enim. Aenean vitae quam non nisi fringilla ornare. Cras cursus. Cras semper. In mollis tincidunt ipsum. Suspendisse potenti.</p>
<p>Phasellus tincidunt. Suspendisse lobortis orci. Nunc aliquet risus nec arcu. Phasellus sit amet metus a velit tincidunt interdum. Integer lectus metus, rhoncus a, vestibulum id, volutpat vel, tortor. Praesent commodo lorem non lacus. Sed enim. Pellentesque dapibus dui a sapien. Curabitur augue nisl, tincidunt a, mattis quis, placerat vel, leo. Nullam odio diam, faucibus interdum, suscipit ut, viverra in, arcu. In hac habitasse platea dictumst. Aliquam neque nunc, interdum id, hendrerit vitae, accumsan vitae, nisi. Nunc eget neque. Maecenas bibendum dolor. Ut a eros. In ipsum quam, lobortis ut, feugiat in, ultrices eget, eros. Ut leo diam, cursus non, molestie in, aliquet sollicitudin, mauris.</p>
<p>Aliquam porta leo eget felis. Curabitur convallis adipiscing arcu. Morbi convallis quam pellentesque pede. Fusce lacinia libero at nunc. Phasellus luctus nunc in ligula. Vestibulum nec nibh. Ut dui magna, suscipit quis, dignissim sit amet, viverra et, est. Proin lectus libero, iaculis quis, imperdiet ut, sodales et, urna. Quisque accumsan, erat in laoreet sodales, tellus est bibendum magna, nec suscipit nulla ante ac urna. Phasellus mauris. Sed ac urna. Nam mi. Proin interdum. Nam malesuada ligula et leo. Aliquam at justo eget enim mollis venenatis. Integer vulputate nisi ac lacus. Morbi tristique sollicitudin mi. Morbi vestibulum lacus a libero euismod volutpat.</p>
</div>
</div>
</body>
</html>
Avatar billede rasmus_a Nybegynder
28. januar 2007 - 22:34 #2
"hoejre" div skal flyttes op foran "venstre" i html'en - så skulle det virke.

I dit eksempel er alt teksten i venstre kolonne i min browser =)
Avatar billede notes2c Nybegynder
28. januar 2007 - 22:48 #3
Ret lige denne style til.

.hoejre {
background: lightgreen;
float: left;
width: 50%;
height: 100%;
}

Havde ikke lige testet ordentligt. Ville den var der nu.
Avatar billede rasmus_a Nybegynder
28. januar 2007 - 22:55 #4
Det virker rigtig fint, men tror du ikke det kan lade sig gøre med float: right?
Avatar billede notes2c Nybegynder
28. januar 2007 - 22:59 #5
Jo det kan det sagtens, men så er du nødt til at bytte rundt på rækkefølgen af din venstre og højre div...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
html, body {
height: 100%;
}

body {
    margin: 0;
    padding: 0;
}
.container {
margin: 0 auto;
width: 800px;
height: 100%;
min-height: 600px;
border: 1px solid #000;
background: red;
}

.venstre {
background: lightblue;
float: right;
width: 50%;
height: 100%;
}

.hoejre {
background: lightgreen;
float: right;
width: 50%;
height: 100%;
}

-->
</style>
<script type="text/javascript">
</script>
</head>

<body>
<div class="container">
<div class="hoejre">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla in velit nec lorem posuere sollicitudin. Nam feugiat. Sed commodo suscipit arcu. Ut ante. Nunc pulvinar ante ut lectus. Donec ante tellus, tincidunt molestie, rhoncus vehicula, porta vitae, mi. Suspendisse accumsan molestie elit. Vivamus feugiat, arcu commodo gravida rhoncus, libero tortor suscipit nulla, feugiat euismod lectus sapien vitae tellus. Etiam dui erat, elementum quis, semper eu, ornare non, quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean lobortis. Nam et lacus. Quisque ligula nisl, ultrices ac, ultricies a, commodo fringilla, enim. Aenean vitae quam non nisi fringilla ornare. Cras cursus. Cras semper. In mollis tincidunt ipsum. Suspendisse potenti.</p>
<p>Phasellus tincidunt. Suspendisse lobortis orci. Nunc aliquet risus nec arcu. Phasellus sit amet metus a velit tincidunt interdum. Integer lectus metus, rhoncus a, vestibulum id, volutpat vel, tortor. Praesent commodo lorem non lacus. Sed enim. Pellentesque dapibus dui a sapien. Curabitur augue nisl, tincidunt a, mattis quis, placerat vel, leo. Nullam odio diam, faucibus interdum, suscipit ut, viverra in, arcu. In hac habitasse platea dictumst. Aliquam neque nunc, interdum id, hendrerit vitae, accumsan vitae, nisi. Nunc eget neque. Maecenas bibendum dolor. Ut a eros. In ipsum quam, lobortis ut, feugiat in, ultrices eget, eros. Ut leo diam, cursus non, molestie in, aliquet sollicitudin, mauris.</p>
<p>Aliquam porta leo eget felis. Curabitur convallis adipiscing arcu. Morbi convallis quam pellentesque pede. Fusce lacinia libero at nunc. Phasellus luctus nunc in ligula. Vestibulum nec nibh. Ut dui magna, suscipit quis, dignissim sit amet, viverra et, est. Proin lectus libero, iaculis quis, imperdiet ut, sodales et, urna. Quisque accumsan, erat in laoreet sodales, tellus est bibendum magna, nec suscipit nulla ante ac urna. Phasellus mauris. Sed ac urna. Nam mi. Proin interdum. Nam malesuada ligula et leo. Aliquam at justo eget enim mollis venenatis. Integer vulputate nisi ac lacus. Morbi tristique sollicitudin mi. Morbi vestibulum lacus a libero euismod volutpat.</p>
</div>
<div class="venstre">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla in velit nec lorem posuere sollicitudin. Nam feugiat. Sed commodo suscipit arcu. Ut ante. Nunc pulvinar ante ut lectus. Donec ante tellus, tincidunt molestie, rhoncus vehicula, porta vitae, mi. Suspendisse accumsan molestie elit. Vivamus feugiat, arcu commodo gravida rhoncus, libero tortor suscipit nulla, feugiat euismod lectus sapien vitae tellus. Etiam dui erat, elementum quis, semper eu, ornare non, quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean lobortis. Nam et lacus. Quisque ligula nisl, ultrices ac, ultricies a, commodo fringilla, enim. Aenean vitae quam non nisi fringilla ornare. Cras cursus. Cras semper. In mollis tincidunt ipsum. Suspendisse potenti.</p>
<p>Phasellus tincidunt. Suspendisse lobortis orci. Nunc aliquet risus nec arcu. Phasellus sit amet metus a velit tincidunt interdum. Integer lectus metus, rhoncus a, vestibulum id, volutpat vel, tortor. Praesent commodo lorem non lacus. Sed enim. Pellentesque dapibus dui a sapien. Curabitur augue nisl, tincidunt a, mattis quis, placerat vel, leo. Nullam odio diam, faucibus interdum, suscipit ut, viverra in, arcu. In hac habitasse platea dictumst. Aliquam neque nunc, interdum id, hendrerit vitae, accumsan vitae, nisi. Nunc eget neque. Maecenas bibendum dolor. Ut a eros. In ipsum quam, lobortis ut, feugiat in, ultrices eget, eros. Ut leo diam, cursus non, molestie in, aliquet sollicitudin, mauris.</p>
</div>
</div>
</body>
</html>
Avatar billede rasmus_a Nybegynder
28. januar 2007 - 23:08 #6
Det virker også fint, men giver jeg de to klasser, hoejre og venstre, en specifik bredde, fx. 200px og 600px går det galt..?
Avatar billede rasmus_a Nybegynder
28. januar 2007 - 23:22 #7
Jeg vender tilbage i morgen. Tak.
Avatar billede notes2c Nybegynder
28. januar 2007 - 23:27 #8
Tja det kan jeg godt se. Må lige se om det er noget som der kan fikses
Avatar billede notes2c Nybegynder
29. januar 2007 - 00:22 #9
Tror ikke det kan løses (jeg kan ikke). Med mindre man skjuler det ved at lade baggrunden i begge kolonner have samme farve... Alternative er en tabel som jo er beregnet til kolonner. Eller også skal du justere højden via javascript.
Avatar billede roenving Novice
29. januar 2007 - 00:26 #10
-- hvad med helt at fjerne venstre-kolonnen og indsætte en clear-div efter den tekst ?-)
Avatar billede notes2c Nybegynder
29. januar 2007 - 00:46 #11
Har prøvet med clear. Hjælper ikke... Hvad memer du med at fjerne venstre kolonne helt.
Avatar billede roenving Novice
29. januar 2007 - 00:51 #12
-- fjerne diven, så det, der skal være venstre kolonne bare er indhold i den store div, og kun højrekolonnen er et selvstændigt element !-)
Avatar billede notes2c Nybegynder
29. januar 2007 - 00:54 #13
Det har jeg også prøvet. Og kan ikke få højre kolonne til at følge med...
Avatar billede roenving Novice
29. januar 2007 - 01:00 #14
Muligheden forudsætter, at højre kolonne er længere end venstre, ellers er javascript nødvendig !-)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
html, body {
height: 100%;
}

body {
    margin: 0;
    padding: 0;
}
.container {
margin: 0 auto;
width: 800px;
height: 100%;
min-height: 600px;
border: 1px solid #000;
background: lightblue;
}

.venstre {
background: lightblue;
float: right;
width: 600px;
height: 100%;
}

.hoejre {
background: lightgreen;
float: right;
width: 200px;
height: 100%;
}
.clearDiv{clear:both;line-height:0;font-size:0;height:0;}
-->
</style>
<script type="text/javascript">
</script>
</head>

<body>
<div class="container">
<div class="hoejre">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla in velit nec lorem posuere sollicitudin. Nam feugiat. Sed commodo suscipit arcu. Ut ante. Nunc pulvinar ante ut lectus. Donec ante tellus, tincidunt molestie, rhoncus vehicula, porta vitae, mi. Suspendisse accumsan molestie elit. Vivamus feugiat, arcu commodo gravida rhoncus, libero tortor suscipit nulla, feugiat euismod lectus sapien vitae tellus. Etiam dui erat, elementum quis, semper eu, ornare non, quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean lobortis. Nam et lacus. Quisque ligula nisl, ultrices ac, ultricies a, commodo fringilla, enim. Aenean vitae quam non nisi fringilla ornare. Cras cursus. Cras semper. In mollis tincidunt ipsum. Suspendisse potenti.</p>
<p>Phasellus tincidunt. Suspendisse lobortis orci. Nunc aliquet risus nec arcu. Phasellus sit amet metus a velit tincidunt interdum. Integer lectus metus, rhoncus a, vestibulum id, volutpat vel, tortor. Praesent commodo lorem non lacus. Sed enim. Pellentesque dapibus dui a sapien. Curabitur augue nisl, tincidunt a, mattis quis, placerat vel, leo. Nullam odio diam, faucibus interdum, suscipit ut, viverra in, arcu. In hac habitasse platea dictumst. Aliquam neque nunc, interdum id, hendrerit vitae, accumsan vitae, nisi. Nunc eget neque. Maecenas bibendum dolor. Ut a eros. In ipsum quam, lobortis ut, feugiat in, ultrices eget, eros. Ut leo diam, cursus non, molestie in, aliquet sollicitudin, mauris.</p>
<p>Aliquam porta leo eget felis. Curabitur convallis adipiscing arcu. Morbi convallis quam pellentesque pede. Fusce lacinia libero at nunc. Phasellus luctus nunc in ligula. Vestibulum nec nibh. Ut dui magna, suscipit quis, dignissim sit amet, viverra et, est. Proin lectus libero, iaculis quis, imperdiet ut, sodales et, urna. Quisque accumsan, erat in laoreet sodales, tellus est bibendum magna, nec suscipit nulla ante ac urna. Phasellus mauris. Sed ac urna. Nam mi. Proin interdum. Nam malesuada ligula et leo. Aliquam at justo eget enim mollis venenatis. Integer vulputate nisi ac lacus. Morbi tristique sollicitudin mi. Morbi vestibulum lacus a libero euismod volutpat.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla in velit nec lorem posuere sollicitudin. Nam feugiat. Sed commodo suscipit arcu. Ut ante. Nunc pulvinar ante ut lectus. Donec ante tellus, tincidunt molestie, rhoncus vehicula, porta vitae, mi. Suspendisse accumsan molestie elit. Vivamus feugiat, arcu commodo gravida rhoncus, libero tortor suscipit nulla, feugiat euismod lectus sapien vitae tellus. Etiam dui erat, elementum quis, semper eu, ornare non, quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean lobortis. Nam et lacus. Quisque ligula nisl, ultrices ac, ultricies a, commodo fringilla, enim. Aenean vitae quam non nisi fringilla ornare. Cras cursus. Cras semper. In mollis tincidunt ipsum. Suspendisse potenti.</p>
Phasellus tincidunt. Suspendisse lobortis orci. Nunc aliquet risus nec arcu. Phasellus sit amet metus a velit tincidunt interdum. Integer lectus metus, rhoncus a, vestibulum id, volutpat vel, tortor. Praesent commodo lorem non lacus. Sed enim. Pellentesque dapibus dui a sapien. Curabitur augue nisl, tincidunt a, mattis quis, placerat vel, leo. Nullam odio diam, faucibus interdum, suscipit ut, viverra in, arcu. In hac habitasse platea dictumst. Aliquam neque nunc, interdum id, hendrerit vitae, accumsan vitae, nisi. Nunc eget neque. Maecenas bibendum dolor. Ut a eros. In ipsum quam, lobortis ut, feugiat in, ultrices eget, eros. Ut leo diam, cursus non, molestie in, aliquet sollicitudin, mauris.
<div class="clearDiv">&nbsp;</div>
</div>

</body>
</html>
Avatar billede notes2c Nybegynder
29. januar 2007 - 01:00 #15
Nå, må hellere sove lidt. Er gået lidt i stå...
Avatar billede notes2c Nybegynder
29. januar 2007 - 01:03 #16
Det er også det som jeg er kommet til.
Avatar billede rasmus_a Nybegynder
29. januar 2007 - 19:51 #17
Desværre er det forskelligt, hvilken kolonne der er længst.
Roenving> Hvad tænker du på med javascript? Hvordan skulle det løbe af stablen? :-)
Avatar billede roenving Novice
30. januar 2007 - 15:59 #18
F.eks.

<script type="text/javascript">
var divs = ['left','middle','right'];

function syncronizeDivs(){
    var maxH = 0;
    d = document.getElementsByTagName("DIV");
    for(i=0;d.length>i;i++){
        for(j=0;divs.length>j;j++){
            if(d[i].className==divs[j])maxH = Math.max(maxH,d[i].offsetHeight);
        }
    }
    for(i=0;d.length>i;i++){
        for(j=0;divs.length>j;j++){
            if(d[i].className==divs[j])d[i].style.height=maxH + 'px';
        }
    }
}
window.onload = syncronizeDivs;
</script>
Avatar billede rasmus_a Nybegynder
31. januar 2007 - 12:46 #19
det prøver jeg lige, så snart jeg for mulighed for det. tak!
Avatar billede rasmus_a Nybegynder
31. januar 2007 - 18:11 #20
smid et svar roenving :-)

..Og hvis du har overskud: Den her DIV bliver konsekvent 2px høj i Internet Explorer. Hvorfor dog det?! :-)

<div style="width: 200px; height: 1px; background-color: #000; font-size: 0px; "></div>

(Indtil jeg ansatte "font-size: 0px;" var den 12px høj)
Avatar billede roenving Novice
01. februar 2007 - 13:49 #21
-- sæt også line-height:0;

-- grunden er, at der ikke kan være et tomt element, så browseren antager, at du har glemt at indsætte noget, og indsætter derfor et mellemrum !-)

-- els velbekomme '-)
Avatar billede rasmus_a Nybegynder
05. februar 2007 - 18:37 #22
ah ja, selvfølgelig.

tak! :-)
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