hvordan få tre kolonner med css?

[iarnesta]

Jeg har akkurat begynt å lage hele websider v.hj.a css, og sliter med å få til tre kolonner.
Websiden har fast størrelse, består av en firkant med det meste av innholdet i, som er på 1002 px og fast høyde, med en ramme rundt. inne i rammen har jeg laget to kolonner, det går fint. Men å lage tre kolonner fpr jeg ikke til !

Utfordringen er:
Under rammen skal jeg ha tre felt, som skal inneholde fiirmainformasjon, fb-like-button og google-søkefelt. Problemet mitt er at fb-button og google-søkefeltet legger seg en rad lenger ned en teksten med firmainformasjon! Hvordan skal jeg få det i samme raden, pent bort etter hverandre ?

Supertakknemlig for hjelp!

 

[Pong]

Sjekk float og bredden på 'feltene' dine (som er divs?).
Les gjerne også om block (google 'css block'), tror det ville hjulpet deg.

 

[Tonny Kluften]

Three Column Layouts - CSS Discuss

 

[iarnesta]

takk for tipset.
har prøvd å sette display:inline-block; i css men det hjelper ikke...

 

[Tonny Kluften]

Har du float:left i hver div?

 

[zapotek]

Anbefalt lesning iarnesta: CSS Techniques I Wish I Knew When I Started Designing Websites - Noupe Design Blog (nyttig for de fleste i grunnen).

 

[iarnesta]

takk folkens for linker. har enda ikke fått det til -men får starte fra scratch så kanskje jeg får det til

 

[iarnesta]

og svar på spørsmål:

ja har float: left i hver div

Har først en DIV som heter BUNN, slik at innholdet i bunnen holder seg innenfor 1000 px som er bredden jeg bruker.

.bunn{
padding:0px 0 0 0;
width:1000px;
margin:auto;
position:relative;
text-align:left;
}

De tre elementene som skal plasseres ved siden av hverandre i bunn-linjen er
adresseTEKST, Facebook-like-button og google-search-felt. De har fått hver sin div:

div.text {
font-family: 'Droid Sans' Helvetica, Verdana, Arial, Georgia, sans-serif;
font-size: 11px;
font-style: normal;
color: #333333;
padding-left: 10px;
text-transform: uppercase;
float:left;
position:relative;
width : 480px;
}

.fb {
display: inline;
float:left;
width:100px;

}

.google2 {
display: inline;
float:left;
width:200px;
}

De to første (text og fb) plasserer seg bra, men google-DIV-en vil ikke....

 

[Pong]

google2-diven mener du kanskje? Har du utelukket skrivefeil?

 

[iarnesta]

hm. jeg skal sjekke for skrivefeil....

 

[selbekk]

tre kolonner med skrift (og 20px mellom hver):

-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
column-count: 3;
column-gap: 20px;

Kanskje ikke helt hva du var på leting etter, men greit å vite anyways ;-)

 

[Nutz]

Tror jeg ville skaffet meg en moderne WYSIWYG-editor og sett hva den produserte av HTML & CSS for å lære meg gangen i dette. Ikke alle som "koser seg" med å lese syntax før man begynner. Mer OK og motiverende å se resultater umiddelbart.

 

[Jannis]

display:block;

 

[Tonny Kluften]

Online CSS Editor - CSS Portal