Avatar billede satyriasis Nybegynder
12. august 2008 - 01:29 Der er 6 kommentarer og
1 løsning

problem med centrering og placering af divs

Jeg er stødt på et lille problem med css, og har lavet en lille test med det her:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

<style type="text/css">

#center {
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    background-color: #ddd;
    border: 1px solid red;
}

#boks1 {
    width: 100px;
    height: 300px;
    background-color: green;
    float: left;
}

#boks2 {
    width: 200px;
    height: 200px;
    background-color: orange;
    float: left;
}

</style>

<title>test</title>
</head>
<body>

<div id="center">

<div id="boks1">boks1</div>
<div id="boks2">boks2</div>

</div>

</body>
</html>


Jeg har lavet en center-div, hvor der er to divs inden i.
Der sker så det mærkelige at center-div'en ikke omkranser de to bokse ordentligt efter jeg har floatet de to bokse, så de kommer til at stå ved siden af hinanden.
Center-div'en bliver bare næsten væk, og ligger sig fladt oppe i toppen.

Jeg er lidt lost her. Syntes det ser rigtigt nok ud ...
Avatar billede satyriasis Nybegynder
12. august 2008 - 01:31 #1
her er hvad jeg får:
http://jesper.vivaa.dk/test.htm
Avatar billede satyriasis Nybegynder
12. august 2008 - 01:33 #2
Har lige fundet ud af at det virker fint i IE, men i Firefox gør det ikke.. hader sådan noget!
Avatar billede mclemens Nybegynder
12. august 2008 - 02:13 #3
<div id="boks1">boks1</div>
<div id="boks2">boks2</div>
<div style="clear:both;height:0;overflow:hidden;">&nbsp;</div>
</div>

</body>
</html>
Avatar billede satyriasis Nybegynder
12. august 2008 - 02:32 #4
hvorfor er det at det virker, når den der kommer på?
Avatar billede mclemens Nybegynder
12. august 2008 - 09:38 #5
Fordi den clearer floats - og gør så laget, der er omkring float elementer udvides til
float elementernes størrelse. Se evt. også http://www.quirksmode.org/css/clearing.html .
(Du kunne også floate det omkring liggende element - så ville det også udvide sig, dog
kan det så betyde at du skal have et ekstra element udenom igen for at centrere ...)
Avatar billede satyriasis Nybegynder
12. august 2008 - 13:54 #6
Super! Så virker det, og du får point :)
Avatar billede mclemens Nybegynder
12. august 2008 - 14:27 #7
Og tak for point :)
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

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