Avatar billede dj-sejler Praktikant
22. januar 2005 - 23:52 Der er 4 kommentarer og
1 løsning

boksmodellen og float:left; der ikke virker

Hej...
jeg har lidt problemer med boksmodellen.
jeg kan ikke få min div:content til at blive indenfor div:container...
det kan jeg ikke forstå.
nogen der kan hjælpe?

det kan ses på http://sapenitia.dtl-design.dk

jeg har følgender css:
. . : : style.css : : . .
body {
    background-image: url("back.gif");
    background-repeat: repeat;
    background-attachment: fixed;
    background-color: #CCC;
    background-position: center;
    margin: 4px;
    padding: 4px;

    font-family: Verdana, Myriad Web, Syntax, helvetica, arial, sans-serif;
    font-size: 11px;
    color: #000;
}
/**** CONTAINER ****/
#container {
    width: 612px;
    border: 1px solid #000;
    background-color: #FFF;
    text-align: left;
    margin: auto;
}

/**** TOPBANNER ****/
#head {
    background-image: url("001_sapenitia.gif");
    background-color: #FFF;
    width: 598px;
    height: 170px;
    margin: 6px 7px 0 7px;
    text-align: center;
    border-width: 0px;
}

/**** MENULINIE ****/
#menu {
    background-color: #7D7D7D;
    width: 598px;
    height: 24px;
    text-align: left;
    margin: 6px 7px 0 7px;
    padding: 0;
    border-width: 0px;
}

/**** content ****/
#content {
    padding: 0;
    background-color: #FFF;
    width: 598px;
    margin: 6px 7px 6px 7px;
    border-width: 0px;
}

#left {
    background-color: #EBEBEB;
    width: 395px;
    padding: 0;
    margin: 0;
    border-width: 0px;
    float: left;
    position: absoulte;
}

#right {
    background-color: #EBEBEB;
    margin: 0 0 0 402px;
    padding: 0 0 0 0px;
    width: 193px;
    border-width: 0px;
    position: relative;
}

. . : : index.php : : . .
<body>

<div id="container">
  <div id="head"></div>
  <div id="menu"></div>

  <div id="content">
    <div id="left">asdf asf asf afd asdf asdf asfd afas
fd asfd asdfasdf afd asdf asdf asfd sadf sadf sadf
sadf asdf asdf asfdas fdas fas fasfd as
fd asfd asdf sadf asdf sadf asdf asfd asdf asdf asdf asfd
a sfdas fdasdf asfd asfd sadf sa
fd asfd asdf sadf asfd
asdf asdf asdf asfdas fdsafd asdf asfd asfd asdf asfd asd
f asfd asfds afds afasdf asdf asdf asdf sadf sadf asdf asdf
asdf sadf sadf asdf asdf a
sdf a
sdf sadf
    </div>
   
<div id="right">&nbsp;fisk
    </div>
  </div>
</div>

</body>
Avatar billede 7th Praktikant
23. januar 2005 - 00:08 #1
Dette skulle gerne løse dit problem.

#left {
    background-color: #EBEBEB;
    width: 395px;
    padding: 0;
    margin: 0;
    border-width: 0px;
}

#right {
    background-color: #EBEBEB;
    margin: 0px;
    padding: 0px;
    width: 193px;
    float: right;
    border-width: 0px;
}

<div id="container">
    <div id="head">&nbsp;</div>
    <div id="menu">&nbsp;</div>

    <div id="content">
        <div id="right">&nbsp;fisk</div>
        <div id="left">tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst</div>
    </div>
</div>
Avatar billede dj-sejler Praktikant
23. januar 2005 - 00:25 #2
det gjorde det oxo... tak :)
Avatar billede dj-sejler Praktikant
23. januar 2005 - 00:42 #3
hmm... nu er den gal igen...
i ie ses siden efter hensigten... men i firefox er der fejl... (eller... der er jo nok i ie ;)
yderlig tilføjet:
css:

.right_menu {
    background-image: url("right_menu.gif");
    width: 193px;
    height: 15px;
    font-size: 11px;
    color: #FFF;
    margin: 0 0 6px 0;
}
.right_text {
    background-color: #EBEBEB;
    padding: 6px;
    width: 181px;
    font-size: 11px;
    color: #FFF;
    margin: 0 0 6px 0;
}
img.sponsor {
    border: 1px solid #FFF;
}

index:
<div id="container">
    <div id="head">&nbsp;</div>
    <div id="menu">&nbsp;</div>

    <div id="content">
        <div id="right">
          <div class="right_menu">&nbsp;&nbsp;Test</div>
      <div class="right_text" class="sponsor"><img src="sponsor/test.gif" alt="dtl-design.dk" /></div>
          <div class="right_menu">&nbsp;&nbsp;Test</div>
      <div class="right_text" class="sponsor"><img src="sponsor/test.gif" alt="dtl-design.dk" /></div>
        </div>
        <div id="left">tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst</div>
    </div>
</div>
Avatar billede 7th Praktikant
23. januar 2005 - 02:36 #4
Kigger på det.
Avatar billede dj-sejler Praktikant
23. januar 2005 - 02:39 #5
bare så du (og andre ved det) har jeg oprettet et nyt spørgsmål!
http://www.eksperten.dk/spm/583734
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