Tekst fylder mere end hvad det ser ud til?

<ole>

Du har formodentlig lagt din tekst i et block element (f.eks. et DIV), og sådan et fylder den tilgængelige bredde og laver linjeskift før og efter elementet ... derfor 'block'

/mvh
</bole>

Hvis du smider din kode op, så kan vi bedre hjælpe dig (:

Hej Ole!

Det kan godt være noget i den stil... Er bare ikke sikker.

Her er koden:

<div id="text_wrapper">
  <div id="text">
      <p>Dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <img src="images/650d.png" />
</div>

Og css'en:

#page #text_wrapper {
    width: 720px;
    float: left;
    margin: auto;
}

#page #text_wrapper #text {
    width: 360px;
    clear: both;
}

#page #text_wrapper img {
    width: 320px;
    float: right;
    margin-right: 10px;
}

Har slettten ting som text-formatering og linjeskift. Går ikke ud fra at der har nogen betydning.

Tak for jeres svar!

Det er pga. din div "text". Div er et block element, så for at gøre det på den måde skal du også floate den.

I øvrigt skal du ikke skrive parent elementet i din css. Da du bruger et id, kan den alligevel ikke indtræde flere steder i din kode. dvs. istedet for #page #text_wrapper skriver du bare #text_wrapper (:

Yes!!

Tusind tak herlevsen123, det virkede :)
Havde ikke tænkt på hvilke slags element jeg havde med at gøre.

Og tak for hintet med parent elementerne. Troede de skulle med.

Smider du et svar så jeg kan give dig point? :)

Så lidt (: Fortsat god dag!

Det er ikke en god fremgangsmåde at floate sine elementer 'ukritisk'. Float er beregnet til at lave tekstomløb - f.eks. omkring et billede.

Float er ikke beregnet eller egnet til generelt at lægge block elementer ved siden af hinanden. Et af problemerne med float er, at man flår elementet ud af det naturlige sideflow og derefter må 'hacke' sig ud af følgevirkningerne med clear. Faktisk blive float ofte i udviklerkredse omtalt som tabellens afløse, når det kommer til abuse  *o)

Til at lægge block elementer ved siden af hinanden har man i stedet forsynet os med en speciel værdi til display property'en: inline-block.

Tildeler du et block element display:inline-block, vil det udadtil opføre sig som et inline element - men indadtil som et block element. Den slags elementer vil altså lægge sig ved siden af hindanden - mens de samtidig kan indeholde block elementer

Enig. Derfor kan du med fordel, bare smide dit billede ind i din paragraph og bruge float: right. Men det kommer an på om billedet har relation til teksten. Ellers ville jeg også gøre som olebole skriver, at bruge inline-block istedet. (-:

Til gengæld ville du nok ikke bruge så mange 'stå- og slavefejl', som olebole brugte i #7 ... OMG!  *D

Wow... Tak for jeres gode forklaringer :)

Inline-block... Hvorfor har jeg ikke tænkt på det? Det virker jo logisk.

Jeg skal prøve at tænke mere over mit valg koder næste gang ;)

Tusind tak og go' weekend!

Selvtak, men du skal lige være opmærksom på én ting: To inline elementer med et linjeskift i koden, vil altid have et mellemrum mellem sig i browseren  *o)

Når jeg f.eks. anbefaler inline-block til en horisontal UL/LI menu, brokker folk sig ofte over, at når LI elementerne får en border eller baggrundsfarve, vil de ikke lægge sig helt ved siden af hinanden med inline-block - men det vil de med float. Løsningen er:


- eller:


- eller:


- hvoraf den første jo giver sig selv, hvis menuen udskrives dynamisk på serveren.

Under alle omstændigheder er det ikke spor mystisk - og ingen vil undre sig over, at koden:


- renderes som: Ole Bole og ikke som OleBole. Det er bare stenalder HTML, når det er smukkest  *D

Og lige for Prins Knud så smider du bare en comment (<!-- -->) imellem </div> og <div> for undgå dette ;) Eksempel følger:
<div>
  <div style="display: inline-block;"></div><!--
 
  --><div style="display: inline-block;"></div>
</div>

Eller du kan:

<div>
  <div style="display: inline-block;">
  </div><div style="display: inline-block;"></div>
</div>