Legge to divs ved siden av hverandre

[muffe]

Jeg har to (eller flere) divs:

 

<div class="notice">
 <h2>Lorem Ipsum</h2>
 <p>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
   Sed vulputate. Nunc dignissim magna. Vestibulum
   lorem dui, mollis nec, laoreet a, porttitor eu, sapien.
   Donec vitae est eget est sollicitudin sollicitudin. Cras
   rhoncus.
 </p>
</div>

<div class="notice">
 <h2>Lorem ipsum vol. II</h2>
 <p>
   Sed porta ipsum ut mauris. Cras suscipit nunc
   vel nulla. Donec ut leo. Nulla sollicitudin orci
   euismod arcu. Donec egestas nisl in neque.
   Praesent sagittis quam ut urna. Cras tincidunt
   lectus nec.
 </p>
</div>

 

Disse vil jeg ha plassert ved siden av hverandre, og med litt mellomrom. Hvis jeg vil legge til flere divs, vil jeg at nr. tre og fire kommer under en og to, fem og seks kommer under tre og fire etc. Altså i en slags tabell med to kolonner. Den div'en til venstre skal ligge helt til venstre, og den diven til høyre skal ligge helt til høyre, dvs. ikke noe mellomrom mellom høyrekant på diven og høyrekanten som den ligger inntill.

 

Hvordan gjør jeg dette med CSS?

 

Et spørsmål til:

Er det mulig å bruke noen CSS effekter på et bilde (satt inn ved hjelp av img-taggen) til å bytte ut dette bildet med ett annet mår musen holder over bildet? Jeg vil helst sette inn bildet vha. img-taggen, men allike vel ha en hover-effekt på det. Vet at jeg kan legge det som en bakgrunn i en div, men det blir ikke sematisk korrekt i dette tilfellt.

 

BTW: Forferdelig irriterende med disse meldingene:

Serveren er for overbelastet til å behandle din forespørsel. Prøv igjen senere

Noen andre som irriterer seg grønn over de? Endret 25. oktober 2005 av muffe

[Magnus Holm]

Prøv med:

.notice { float: left; }

[muffe]

Da har jeg dette:

.notice {
 float            : left;
 margin-right     : 5%;
 width            : 45%;
}

Dette vil føre til at det vil være 5% mellom boksene, og hver boks vil være 45%. Problemet er at jeg får også 5% tomrom til høyre for boksen til høyre. Noen tips til hvordan jeg forhindrer det? Jeg vil ha boksen til høyre absolutt helt til høyre i bildet, og all eventuell plass til overs skal legges MELLOM boksene.

 

Noen som har innspill til spørsmål 2?

[DevN]

Du må vel i så fall angi forskjellige klasser til de to boksene, f.eks. "left" og "right", så bruker du float: left på den ene og float: right på den andre. Eller misforsto jeg noe nå?

[muffe]

Du må vel i så fall angi forskjellige klasser til de to boksene, f.eks. "left" og "right", så bruker du float: left på den ene og float: right på den andre. Eller misforsto jeg noe nå?

5058990[/snapback]

 

Er det eneste mulighet? Da må jeg sette annenhver klasse til venstre og annenhver til køyre... Jaja. hadde tenkt å slippe med en klasse... Men det får gå. Fremdeles ingen innspill på mitt andre spørsmål? Se første post.

[DevN]

Tror nok du må ty til med JavaScript til det andre.

 

Eneste CSS-metoden jeg kan komme på i farta, fungerer vel kun i Opera:

img:hover { content: url("bilde.gif") }

 

Muligens Firefox også.

[Cucum(r)]

Tror nok du må ty til med JavaScript til det andre.

 

Eneste CSS-metoden jeg kan komme på i farta, fungerer vel kun i Opera:

img:hover { content: url("bilde.gif") }

 

Muligens Firefox også.

5059071[/snapback]

 

Har fungert i Firefox i evigheter

 

Uansett, eg ville satt marginen til 4%, sidan nokre nettlesarar tolker 50%+50% som 101%.

[pakke]

Et spørsmål til:

Er det mulig å bruke noen CSS effekter på et bilde (satt inn ved hjelp av img-taggen) til å bytte ut dette bildet med ett annet mår musen holder over bildet? Jeg vil helst sette inn bildet vha. img-taggen, men allike vel ha en hover-effekt på det. Vet at jeg kan legge det som en bakgrunn i en div, men det blir ikke sematisk korrekt i dette tilfellt.

5058537[/snapback]

Prøv denne metoden.