Forstå bruk av float og clear

Laohn · 3. oktober 2011

Håper noen kan hjelpe meg.

Hver gang jeg tar ibruk float på en div så skjer det alltid noe ulogisk.

Har satt opp et lite eksempel av en layout sånn at det blir lettere å se.

Prøver å floate et bilde til høyre i eksempelet her innenfor en annen div som fungerer mer som et rammeverk (Wrapper). Jeg sier den skal floate til høyre men den stopper i midten av en eller annen grunn.

<!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=utf-8" />
<title>Test</title>
<link href="css/test.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="wrapper">
<div id="header">
HEADER
</div>
<div id="content">

Some example content to write something about and so on.

<div id="picture">

</div>



</div><!-- Avslutter Content Div -->
</div><!-- Avslutter Wrapper Div -->
</body>
</html>

@charset "utf-8";
/* CSS Document */
body {
font-size: 12px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

#wrapper {
position: relative;
height: 800px;
width: 600px;
border: 1px solid #000;
margin: 0 auto;
}
#header {
width: 598px;
height: 100px;
border: 1px solid #000;
text-align: center;
}

#content {
width: 400px;
text-align: left;
margin-left: 5px;
margin-top: 5px;
}
#picture {
width: 100px;
height: 100px;
border: 1px solid #000;
float: right;
}

Laohn · 3. oktober 2011

Glem det!

Naturligvis glemmer jeg alltid det mest enkle og åpenbare.

Content div er jo i dette tilfellet 400px så er jo derfor den ikke går lengre enn 400px.

Occi · 5. oktober 2011

Protip: bruk ctrl+a for å sjekke hvordan "boksene" (dvs. de forskjellige HTML-elementene) ser ut, dvs. hvor stor plass de tar og hvor de egentlig ligger. Enda bedre er det å bruke en inspector som f. eks Chrome Inspector, Opera Dragonfly eller den populære addonen til Firefox; Firebug (finnes også til andre browsere, noen ganger under andre navn).

Logg inn

Forstå bruk av float og clear

Anbefalte innlegg

Laohn

Lenke til kommentar

Videoannonse

Laohn

Lenke til kommentar

Occi

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer