Avatar billede rif1900 Nybegynder
17. oktober 2008 - 11:54 Der er 5 kommentarer og
1 løsning

Problemer med at få højden til at justrerer sig korrekt

Hej ekseperter

Jeg har følgende hiraki i mine Divs.

Body
- Container
    - Sitename
    - Nav
    - Wrap1
      - Wrap2
          - avmenu
          - content
      - Footer

eller i koden ser det sådan ud:

<body>
  <div id="container">
    <div id="sitename">
    </div>
    <div id="nav">
    </div>
    <div id="wrap1">
      <div id="wrap2">
        <div id="avmenu"></div>
        <div id="content"></div>
      </div>
    </div>
  </div>
</body>

Problemet er at kun "wrap1" justerer sig efter indholdet i content og avmenu. Kan på ingen måde få wrap2 til at gøre det, har også prøvet at lave en wrap3.
Problemet eksisterer kun i Firefox og Google Chrome!!

CSS Koden ser sådan her ud:
body
{
    background: #FFFFFF url(Layout/bodybg.gif) repeat-x;
    color: #505050;
    font: x-small verdana;
    margin: 0;
    padding: 0;
    text-align: center;
}
#container
{
        background:#c0c0c0 url(Layout/bodybg.gif) repeat-x;
        margin:0 auto;
        text-align:left;
        width:950px;
}
#wrap1
{
    border-bottom:1px solid #9797ab;
    border-left:1px solid #9797ab;
    border-right:1px solid #9797ab;
    clear:both;
    padding:0;
    width:928px;
    padding: 10px;
    background-color: #c1c2cc;
}
#wrap2
{
    border: 1px solid #9797ab;
    /*background:url(img/header.jpg) top left no-repeat;*/
    padding: 10px;
    width: 908px;
    background-color: #FFFFFF;
}
.avmenu
{
    clear: left;
    float: left;
    width: 150px;
    margin: 0 0 10px 0;
    padding: 0;
    font-size: xx-small;
}
.content
{
    float:left;
    padding:10px;
    line-height: 1.6em;
    text-align: left;
}
Avatar billede olebole Juniormester
17. oktober 2008 - 12:18 #1
<ole>

Du skal clear'e dine floats - ellers fylder dine float'ede elementer ikke noget:

    <div id="wrap1">
      <div id="wrap2">
        <div id="avmenu"></div>
        <div id="content"></div>
        <div style="height:0;overflow:hidden;clear:both">&nbsp;</div>
      </div>

/mvh
</bole>
Avatar billede olebole Juniormester
17. oktober 2008 - 12:19 #2
Til gengæld kan jeg ikke finde retfærdiggørelse for din clear her:

.avmenu
{
    clear: left;
    float: left;
Avatar billede rif1900 Nybegynder
17. oktober 2008 - 13:06 #3
smid et svar ole, du har lige løst 2 timers intens irritation :)

clear i avmenu er bare et leftover fra utallige mærkelige forsøg
Avatar billede olebole Juniormester
21. oktober 2008 - 19:58 #4
Det kommer her, men læg et svar tag selv langt de fleste af pointene selv  ;o)
Avatar billede olebole Juniormester
22. oktober 2008 - 14:46 #5
Jamen, så siger jeg tusind tak for points  =)
Avatar billede rif1900 Nybegynder
22. oktober 2008 - 15:53 #6
Svaret var jo 200 point værd for mig :)
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