Luft mellem kollonner

Læg din kode på nettet og kom med et link så vi kan se det i funktion.

Fandt en mulig løsning med at lave en negativ margin-right og negativ margin-left på det samme som border-spacing, og ændre border-collapse til inherit, for at det virkede i alle browsere.

Har nogle kommentarer eller bedre løsninger, så hører jeg dem gerne

Koden er sådan her (der er ikke andet):

CSS:
.container{
  width: 100%;
  display:table;
  border-collapse:inherit;
  border-spacing: 12px 0px;
  margin-left: -12px;
  margin-right: -12px;
}
.boxes{
  width: 312px;
  display: table-cell;
  background-color: #fafafa;
}

HTML:
<div class="container">
  <div class="boxes">Boks 1</div>
  <div class="boxes">Boks 2</div>
  <div class="boxes">Boks 3</div>
</div>

Kom som sagt gerne med bedre forslag, eller alternative løsninger :)

<ole>

Det er helt forventeligt, men pudsigt nok, er der mange, som ikke forudser, hvordan elementer, der gøres til inline elementer, opfører sig  =)

To inline elementer, som står på to linjer, vil altid blive renderet med et mellemrum. Det overrasker dig sikkert ikke, at:


- renderes som 'Ole Bole' og ikke som 'OleBole'. Det samme gælder som bekendt:


Når du med display gør et block element til en eller anden slags inline element, vil det samme ske - hvilket ikke er så mærkeligt.

Løsningen er at fjerne mellemrummet i koden:


- eller:


/mvh
</bole>

#2 er en løsning, men ikke særlig hensigtsmæssig eller selvforklarende én  =)

Hej Ole

Tak for svaret. Er ikke sikker på jeg forstår den. Her vil jeg jo netop have mellemrum mellem cellerne, og ikke eliminerer et mellemrum.

Min løsninger her hvor den ikke er inline-table, men kun table, krævede stadig "en hack" med negativ margin left og right, fordi jeg ikke ved om man kun kan bede den lave mellemrum mellem cellerne, og ikke i venstre/højre side. Prøvede noget med first-child mv, men det virker vist kun på rigtige html tabeller.

Så løsningen med hack blev:
CSS:
.container{
  width: 100%;
  display:table;
  border-collapse:inherit;
  border-spacing: 12px 0px;
  margin-left: -12px;
  margin-right: -12px;
}
.boxes{
  width: 312px;
  display: table-cell;
  background-color: #fafafa;
}

HTML:
<div class="container">
  <div class="boxes">Boks 1</div>
  <div class="boxes">Boks 2</div>
  <div class="boxes">Boks 3</div>
</div>

Hehe skriver vist samtidige

Men har du en bedre løsning der løser:
1: Samme højde på kollonner
2: Ingen javascript og ingen -10000 margin padding hack
3: Mellemrum mellem "celler/kollonner"
4: Mulighed for afrunding

.... så hører jeg meget gerne, for kan ikke komme på andet ;)

Det kan jeg ikke have nogen mening om, da jeg ikke ved, hvad du vil vise. Hvad er i øvrigt et '10000 margin padding hack'? Sådan et kender jeg ikke  =)

Det kunne lyde, somom du bør bruge en tabel, men jeg kan som sagt ikke vide noget med sikkerhed  =)

Men det er jo også en css tabel jeg bruger så vidt jeg forstår, og jeg kan jo ikke lave rundede hjørner på cellerne i en normal tabel så vidt jeg ved.

Den der hack er noget med de laver en stor negativ margin på f.eks. 10000px og så lave de den modsatte padding, eller sådan noget. Ikke optimalt ;)

Mit mål er at få 3 kollonner til at stå ved siden af hinanden, med mellemrum imellem hver kollonne.
Kollonnerne skal være lige højre, og følge højden i den kollonne med mest indhold.
Der skal være mulighed for at lave afrundede hjørner, og iøvrigt skal man helst begrænses så lidt som muligt i css.
Senere skal det laves dynamisk, så det skal også med i baghovedet :)

Nej, der ikke noget, der hedder en 'css tabel'. Du bruger DIV, ikke et TABLE element. De to ting har intet med hinanden at gøre.

Jeg forstår stadig ikke din forklaring af de 1000px - men det er nok også ligemeget  =)

Jeg forstår godt, du ønsker tre kollonner, og hvordan de skal se ud, men du forklarer stadig ikke noget om, hvad det er, du vil vise i elementerne.

Du kan bare give elementerne margin i siderne. Så opnår du horisinotalt mellemrum mellem elementerne - men inline elementer kan som bekendt ikke modtage vertikal padding eller margin.

De kalder det jo display: table og display: table-cell, så det er vel for at det om ikke andet skal fungerer som en tabel, selvom det er divs og css.

Omkring den der 10000px ting så se understående link:
http://css-tricks.com/fluid-width-equal-height-columns/
... og scroll ned til dette: One True Layout Method

Jeg skal have html indhold dynamisk i elementerne (billeder, tabeller, tekst etc), og så skal elementerne/kollonnerne tilpasse sig længden på den længste, og holde sig lige høje altid
Samtidige skal der være baggrund og rundede hjørner på dem.

Men det virker med mit eksempel, så det er mere hvis du har en enklere måde eller lign.

En mand i kvindetøj kan måske ligne en kvinde på visse områder, men han vil aldrig fungere som kvinde. Der er stor forskel på tabeller og andre elementer med en tabel-agtig display værdi. Det er to komplet forskellige ting  =)

Det viste 'CSS-hack' er blot ét af utallige eksempler på dårlige hacks for at få HTML/CSS til at opføre sig på en måde, som aldrig har været meningen med disse teknologier: Layout i kollonner.

Først med CSS 3 har W3C prioriteret layout i kollonner, men det er meget forskelligt understøttet i nettets aktuelle browsere.

Ja kan jeg se: http://caniuse.com/#search=column

Så er den løsning jeg selv fandt nok bedst for der skulle vist ikke være noget til hindre for at den virker i alle de forskellige browsere med undtagelse af de helt gamle

Tak for kommentarerne