Avatar billede madseksperten Nybegynder
18. februar 2014 - 12:13 Der er 3 kommentarer og
1 løsning

div width er kun på header

Hej.

Jeg har sat et div omkring min side med en width på 1000px; Jeg forstår ikke hvorfor den kun kommer rundt om min header. En der ved hvorfor? Jeg tænker den skulle vel gerne gå ned under mine knapper, selvom jeg ikke har defineret en højde?

http://postimg.org/image/59msck2gh/

<!DOCTYPE html>
<html>
<head>
<meta charset="US-ASCII">
<link rel="stylesheet" type="text/css" href="../css/reset.css">
<link rel="stylesheet" type="text/css" href="../css/main.css">
<title>Index</title>

</head>
<body>
    <div id="big_wrapper">
        <header id="top_header">
            HEADER
        </header>
        <nav>
            <div id="box"><h4>START</h4></div>
            <div class="box1"><h4>HOME</h4></div>
            <div class="box1"><h4>PICTURES</h4></div>
            <div class="box1"><h4>ABOUT</h4></div>
            <div class="box1"><h4>STORY</h4></div>
            <div class="box1"><h4>NEWS</h4></div>
            <div class="box1"><h4>CONTACT</h4></div>
        </nav>
    </div>
</body>
</html>

CSS:

@CHARSET "US-ASCII";

* {
    padding: 0px;
    margin: 0px;
}

body {
    text-align:center;

}

#big_wrapper {
    border: 5px solid black;
    width: 1000px;
    margin: 20px auto; /* 20px: afstand fra top.. auto: alle andre sider. */
    text-align: left;
}

#top_header {
    background: green;
    height: 80px;
}

#box {
    height: 100px;
    width: 200px;
    border: 2px solid black;
    float:left;
    margin-left: 17px;
    text-align: center;
}
.box1 {
   
    height: 100px;
    width: 100px;
    border: 2px solid black;
    float: left;
    margin-left: 17px;
    text-align: center;
}

Mvh Mads
Avatar billede keysersoze Guru
18. februar 2014 - 12:22 #1
floatede elementer fylder ikke noget - det kan løses på mange måder, fx ved at sætte overflow: hidden; på din big_wrapper.

Du kan evt også tage et kig på bootstrap - det er et godt framework både at benytte og få idéer ud fra og her er netop din problematik også løst på en god måde.
Avatar billede madseksperten Nybegynder
18. februar 2014 - 12:56 #2
Ok mange tak for svaret. Må jeg ikke lige spørge om et sidste spørgsmål. Hvis jeg nu skulle have test 1 og test 2 ned på næste linje under kasserne, burde man så ikke kunne gøre sådan? :
De kommer til at ligge i venstre side, istedet for nedenunder:

http://postimg.org/image/ssij9ig2x/

<div id="big_wrapper">
        <header id="top_header">
            HEADER
        </header>
        <nav>
            <div id="box"><h4>START</h4></div>
            <div class="box1"><h4>HOME</h4></div>
            <div class="box1"><h4>PICTURES</h4></div>
            <div class="box1"><h4>ABOUT</h4></div>
            <div class="box1"><h4>STORY</h4></div>
            <div class="box1"><h4>NEWS</h4></div>
            <div class="box1"><h4>CONTACT</h4></div>
        </nav>
        <div id="test1">
            test1
        </div>
        <div id="test2">
            test2
        </div>
    </div>

CSS:

#test1 {
    float: left;
}

#test2 {
    float: left;
}
Avatar billede madseksperten Nybegynder
18. februar 2014 - 12:59 #3
aahhh:

clear: left;
Avatar billede Slettet bruger
18. februar 2014 - 16:48 #4
Hvis jeg må give dig et råd skulle du også få dit site responsive
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
Kurser inden for grundlæggende programmering

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