2 og 3 kolonner inden i en relativ div

Flytter ned på næste linje? Kan det mon løses med word-wrap:break-word; ?

<ole>

Du kan få al det kode, du ønsker at rode med - men du må vise os din, hvis du vil have noget relevant i forhold til dén  ;o)

/mvh
</bole>

w13, word-wrap virker vist desværre kun i IE

olebole, jeg har fundet ud af, at det mere er et generelt problem. Når jeg laver en relativ div ved jeg ikke, hvordan jeg tvinger teksten til at følge div'ens width. Ofte vil teksten bare fortsætte hen over div'ens bredde.

Dette virker, dvs. teksten bliver afbrækket af kolonnernes bredde:

#box {
    width: 800px;
    text-align: left;
    margin: auto;
    background-color: #ffffff;
    position: relative;
}
#content {
    background: url(gfx/background.png) top left repeat-y;
}
#kolonne 1 {
    width: 200px;
    float: left;
}
#main {
    width: 400px;
    float: left;
}
#kolonne3 {
    width: 200px;
    float: left;
}
#footer {
    clear: both;
}

<div id="box">
....
<div id="content">
  <div id="kolonne1">blabla</div>
  <div id="kolonne2">blabla</div>
  <div id="kolonne3">blabla</div>
  <div id="footer"></div>
</div>
</div>

Problemet er, at så snart jeg indsætter en div i f.eks. kolonne1 har jeg problemet med, at teksten blot fortsætter ud over kolonne1. Der er nogle variabler som jeg ikke har styr på?!

hmm...

problemet er højst sandsynligt at Firefox er meget mere følsom mht. præcisering af oplysninger i din css, end explorer. Derfor hvis du vil være sikker, så skær alting ud i pap for firefox... dermed får du også med større sandsynlighed samme resultat crossbrowser, når du er færdig med sitet... :)

men start med at definere alt hvad der skal være relativt positioneret, hvilket ser ud som om, at alt skal.

http://rs-invent.dk/temp/box.php <-- her ser det fint ud.. læg mærke til at jeg har tilføjet margin og padding, da det tit er det der går galt mellem IE og FF hvis ikke det defineres.

du kan evt. sætte relativ positionering på alt, medmindre det er meningen at sitet skal laves efter browseren, så er du på den sikre side med at alt dit indhold forbliver hvor du vil have det..

chr1234 >> Mon du har testet med ét langt ord? Det deles ikke, så det vil udvide divet, præcis som en tabelcelle ville blive udvidet  =)

Ja, jeg har også resultatet som -zonic- har postet.

Når jeg nu indsætter en <div> i kolonne1, hvor menuen skal være, vil et menupunkt som er længere end width'en udvide div'en. Hvordan undgår jeg dette? Jeg har f.eks. en list med menupunkter, og nogle af menupunkterne kunne være længere end "tilladt"...

Du kan ikke dele ordet, men du kan skjule det overskydende:
    <div style="overflow:hidden">

det lyder ikke hensigtsmæssigt, at de er for bredde..du kan skjule dem, som olebole beskriver, men jeg vil ikke foreslå det, da det ser uprofessionelt ud, at man kan se der mangler noget... ellers må du lave et script, med max længde på din text og så evt  ... bagefter.. ser lidt bedre ud... men begge løsninger er noget skidt da designet gerne skulle passe til menuen... men op til dig selvfølgelig :)

-zonic- >>

Uautoriseret d-
elte ord ser v-
ed Gud heller
ikke særlig pr-
offesionelt ud!

Én ting er at blive stemplet som dårlig designer, der er nødt til at gemme noget tekst for at få tingene til at gå op.
Det er da værre at blive stemplet som dårlig designer med et seriøst sproghandicap  ;o)

olebole >>

tror du misforstår mig.. jeg snakker ikke om sproghandicap eller om at dele ord som du så fint illustrerer ;)

jeg taler om ex.

menu
information omkring...
kontakt os

se lige mit post igennem igen, og find lige det sted hvor jeg foreslår at dele ord ;oP

jeg foreslår at man kan se at man er opmærksom på at noget fylder for meget ved at tage hensyn med de 3 ... istedet for at det bare står "sprogspas" og så er "ser" smuttet ;)

- okay, så misforstod jeg ... sorry  ;o)

MS har forresten en CSS-property, der desværre ikke er standard - som hedder 'text-overflow'. Den kan have værdien 'clip' og 'ellipsis' og den sidste lave netop udeladelses tegnet - de tre punktum. Den virker, forudsat overflow er sat til hidden  =)

- men som sagt er den desværre hverken valid eller understøttet i andet end IE  :o|