Avatar billede ttopholm Nybegynder
13. december 2006 - 23:40 Der er 8 kommentarer og
1 løsning

inner div bryder ud af ydre div

Jeg har denne side..

Den er ikke helt køn i nu:

<!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=iso-8859-1" />
<title>test</title>
<style type="text/css">
    body
    {
        background-color:#333333;
        text-align:center;
        font-family:Tahoma, Arial, Helvetica, sans-serif;
        font-size:10px;
    }
</style>
</head>
<body>
<div style="position:relative; width:800px; margin: 0 auto;">
<div style="background-image:url(images/top.jpg); height:273px; width:800px;">
</div>
<div style="background-image:url(images/content.jpg); width:800px; position:relative;" id="outerContent">
    <div style="width:400px; margin:20px; border:1px solid black; position:absolute; top:0px; left:0px; overflow:hidden;" id="innerContent">
    hej med dig
    </div>
</div>
<div style="background-image:url(images/bottom.jpg); height:34px; width:800px;">
</div>
</div>
</body>
</html>


Min innerContent bryder ud af outercontent, men jeg vil have outercontent til at blive det længere i højden.

Hvordan kan det løses.
Avatar billede olebole Juniormester
14. december 2006 - 11:03 #1
<ole>

Jamen, et absolut positioneret element har jo ingen udstrækning - og kan derfor ikke 'skubbe' eller udvidde andre elementer ... men hvorfor er det dog også absolut positioneret?  =)

/mvh
</bole>
Avatar billede ttopholm Nybegynder
14. december 2006 - 11:13 #2
Ja... Det var egentlig også dumt... det kan jeg godt se ;-)

Smid et svar..
Avatar billede olebole Juniormester
14. december 2006 - 11:44 #3
- gerne ... *griiiiiiiiiiiiiiiiiiiiiiiiib*  ;o)
Avatar billede ttopholm Nybegynder
14. december 2006 - 11:56 #4
fanget...
Avatar billede ttopholm Nybegynder
14. december 2006 - 12:24 #5
hov, det virker ikke i FF
Avatar billede ttopholm Nybegynder
14. december 2006 - 12:28 #6
<div style="background-image:url(images/content.jpg); width:800px; text-align:left;" id="outerContent">
        <div style="width:550px; margin-left:20px; margin-top:20px; float:left; " id="LeftContent">
            [Content]
        </div>
        <div style="width:140px; float:left; margin-left:20px; margin-top:20px; " id="RightContent">
            [Top 10]
        </div>   
    </div>
Avatar billede olebole Juniormester
14. december 2006 - 13:15 #7
Nej, for float'ede elementer har heller ingen udstrækning  =)
Avatar billede ttopholm Nybegynder
14. december 2006 - 13:19 #8
hmmm... okay... Så er der vel kun tabeller tilbage...
Avatar billede roenving Novice
15. december 2006 - 14:34 #9
F.eks.

    <div style="background-image:url(images/content.jpg); width:800px; text-align:left;" id="outerContent">
        <div style="width:550px; margin-left:20px; margin-top:20px; float:left; " id="LeftContent">
            [Content]
        </div>
        <div style="width:140px; float:left; margin-left:20px; margin-top:20px; " id="RightContent">
            [Top 10]
        </div>
        <div style="clear:both;"></div>
    </div>
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