Gå til innhold

Forstå bruk av float og clear

Laohn

Av Laohn
i Programmering og webutvikling

Anbefalte innlegg

Laohn

Laohn

Skrevet
Skrevet

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.

eksempelad.jpg

 

 

<!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;
}

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Occi

Occi

Skrevet
Skrevet

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).

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...