Følges ikke ad

@Gustav
Er du ikke lidt af en piedestalrytter her? Bliver det ikke svært for en håndværker at mure en mur, hvis han ikke har en mureske?

@Danni, beklager at jeg ikke fik dit navn rigtigt med. Men du skulle nu læse mit indlæg - det kunne være du lærte noget. Jeg tog udgangspunkt i javascript, da det var det konkrete eksempel som jeg gik efter og som du forsvarede.

@Michael, Artiklen som både Jokke og jeg har linket til viser flere forskellige måder at løse problemet på, og som Jokke også påpeger, blandt andet en løsning med tables.

@Jokke, Det er ikke rigtigt at alle andre end tabel eksemplet bruger CSS3. Blandt andet "Nicolas Gallagher Method"-eksemplet bruger kun CSS3 til nogle selectors, som snildt kunne laves om til CSS2.

En enkelt kommentar til dit argument om at tabeller er bedre end nestede divs... div>div+div || table>tr>td+td
- Hvad er mest nested og har mest markup?

Jeg vil medgive dig, at hvis man i forvejen bruger jQuery på siden så vil et performance hit ikke være signifikant, men at bruge en hel HTTP request udelukkende for den effekt er hjernedødt.

Jeg står ved min mening om at jeg synes det forkert at anbefale både javascript og tabel baserede løsninger, når det kan klares uden. Så lad os nu bare blive enige om at være uenige.

Et simpelt eksempel med jQuery

 function EqualHeights() {
 
     forum = $(".forum").height();
     event = $(".event").height();
 
     height = Math.max(forum, event );
 
     $(".forum, .event").css('min-height', height + "px");
 
 }
 
 $(document).ready(function(){
    EqualHeights();
 })
 
 $("img").load(function(){
 EqualHeights();
 });

Eller spar browseren for alt det CSS og javascript vha

 <table>
 <tr><td class="forum"></td></tr>
 <tr><td class="events"></td></tr>
 </table>

/J

Der er flere måder at opnå kolonner med samme højde på. De fleste gængse metoder er gennemgået her: Fluid Width Equal Height Columns - CSS-Tricks.com ( http://css-tricks.com/fluid-width-equal-height-columns/ )

En god gammel klassiker er at bruge et gentagende (nedaf) baggrundsbillede som skaber illusionen om kolonnerne. Det er et gammelt trick, som er omtalt i denne artikel fra 2004; http://www.alistapart.com/articles/fauxcolumns/

Det er simplere end de eksempler fra den første artikel, men den gamle artikel er også kun anvendelig i layouts med fast bredde (fixed width). Teknikken virker stadig den dag i dag, den har bred anerkendelse og understøttes af alle gængse browsere.


@Patrick, Du har vidst ikke forstået hvordan vertical align virker. Og valign attributten bruger man slet ikke mere. Den måde du bruger den på er udelukkende til tabel celler. For uddybende forklaring: What is Vertical Align - CSS-tricks.com ( http://css-tricks.com/what-is-vertical-align/ )

@Jokke, Tables... Det er vel en joke? Og at bruge javascript (for slet ikke at nævne jQuery) til den slags er som at skyde gråspurve med kanoner...

Jeg har før brugt denne opskrift med succes:

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Hvor du sætter din content og div's til at floate.

Prøv med følgende:

 <div class='content' width='100%'>
      <div style='float: left ;width: 69.8%;' class='forum' valign='top'>
          <div class='left'>
              <!-- Forum -->
              askdjaskl<br>askdjaskl<br>askdsjaskl<br>askdjaskl<br>askdjaskl<br>askdjaskl<br>askdjaskl<br>askdjaskl<br>askdjaskl<br>askdjaskl
          </div>
      </div>
      <div style='float: right ;width: 30%;' class='event' valign='top'>
          <div class='left'>
              <!-- Event -->
              askdjaskl<br>askdjaskl<br>askdsjaskl<br>askdjaskl<br>askdjaskl<br>askdjaskl<br>askdjaskl<br>askdjaskl<br>askdjaskl<br>askdjaskl<br>askdjaskl<br>askdjaskl<br>askdjaskl<br>askdjaskl<br>askdjaskl<br>askdjaskl<br>askdjaskl<br>askdjaskl
          </div>
      </div>
 
      <div class="clearer"> </div>
  </div>

 .content {
      background: #000000;
      width: 100%;
  }
  
  .forum {
      background: #FFFFFF;
      border-right: 3px solid #000000;
      border-top: 3px solid #000000;
      width: 70%;
      max-height:100%;
      height:100%;
      border-top-right-radius: 0.5em;
      -webkit-border-top-right-radius: 0.5em;
      -moz-border-radius-topright: 0.5em;
  }
  .event {
      background: #FFFFFF;
      border-top: 3px solid #000000;
      width: 30%;
      max-height:100%;
      height:100%;
      border-top-left-radius: 10px;
      -webkit-border-top-left-radius: 10px;
      -moz-border-radius-topleft: 10px;
  }
  .left {
      margin-left:10px;
  }
 
  .clearer {
     clear:both;
  }

Patrick det virker ikke

Brian, hvordan kan jeg fx lave det om til to koloner istedet for tre

Brian, hvordan kan jeg fx lave det om til to koloner istedet for tre

Det er bare at fjerne den ene kolonne (div) i sidens eksempel. col3 f.eks.

Det kommer ikke til at se rigtigt ud :/

Jeg kan ikke få det runde med på dem


Jokke, hvordan vil du sætte det op så?
Og jeg vil ikke lave det i tables

Gustav:

En joke tror jeg næppe det er, og tænk på at folk her inde specialisere sig i bestemte programmerings sprog/scripts, og fortæller udfra det hvad de kan hjælpe med

Så en joke er det vel næppe, måske lidt mere oldschool..

Iøvrigt havde jeg også brugt tabeller hvis det gav for mange problemer.