Kan någon vänlig själ hjälpa mig med CSS?

Jag skulle ta och söka på ordet "table", "td", "tr", "th", "tbody", "thead" osv allt som har med tables att göra.

Men framförallt table.
Sök i din CSS fil efter alla ställen där det förekommer.

och du kanske hittar någon class som har table framför sig osv.

table.position
{
  position: relative;
  width: 100%;
  table-layout: fixed;
}

Hittade denna till exempel.
Det står att 'table' med class 'position' ska vara 100%.

Det innebär i praktiken att denna table kommer bara ta upp 100% procent av bredden för det element som omsluter denna table. Så om denna table finns i en div med width 500px då blir också table anpassat efter detta.

Så gör lite sökningar så hittar du snart bekymret.

Varför använder du <table> och inte <div> för layout? Fast det är ju din ensak.
Spontant känns det som föregående inlägg skrev - tabellen ligger inom ett område som är definierat att inte vara tillräckligt brett för att tabellen ska bli bredare. Det du kan börja med under felökningen är att göra kantlinjerna tillfälligt synliga. Då blir det lättare att se var det spökar.

<div class="rubrikTop">Öppna Kurser</div>

<div class="mainContainer">

<div class="leftCont">
Innehåll till vänster
</div>

<div class="rightCont">
Innehåll till höger
</div>

</div>

.rubrikTop {

   position: relative;
   padding: 0px;
   overflow: hidden;

}

.mainContainer {

   position: relative;
   padding: 0px;
   width: 500px;
   overflow: auto;
   clear: both;

}

.leftCont {

   position: relative;
   padding: 0px;
   width: 200px;
   overflow: hidden;
   float: left;

}

.rightCont {

   position: relative;
   padding: 0px;
   width: 200px;
   overflow: hidden;
   float: right;

}

Detta exempel bygger på att du ersätter innehållet i DIV med class 'art-post-body'
med något i still med den struktur jag visar ovan.

Och i CSS ovan så bygger det hela på att 'mainContainer' har en fast bredd och ingen padding alls.
I denna container så lägger vi två DIV som vi floatar, en med left och en med right.

Dessa två DIV har vi också fast bredd på och deras total bredd får inte överstiga 'mainContainer' för då "hoppar" dom runt.

Med andra ord behöver dom nog med utrymme för att rymmas bredvid varandra i 'mainContainer'.

Så länge du delar upp 'mainContainer' bredden på dessa DIV ska det gå bra.

Dock att tänka på om du vill ha padding på någon av dessa innre DIV så behöver du dra bort paddingen från den DIV:ens total bredd för att det ska bli korrekt.

Exempelvis så vill vi ha 10 pixel padding på 'leftCont' så då drar vi bort 10 px på varje sida av bredden det vill säga 10x2 - 200 = 180px.

[padding 10px | inner bredden(width 180px) | padding: 10px] = total bredd 200px.

Då ska alltså vår width vara 180 px på 'leftCont' om vi sätter 10px padding.

Detta gäller för 'rightCont' om du vill ha padding där också.

Men så länge dessa DIV:s inte "rör" vid varandra bör det inte vara problem.

Tänk på att eventuell border du lägger på dessa divar behöver räknas in som avdrag på total bredd ifall du använder sådan.

Jag tror du kommer underfund med det om du testar lite med min kod.

Till sist nämner jag att vi kör "clear:both" på 'mainContainer' så det inte ska strula med efterföljande element då vi använder float på DIV:arna inuti 'mainContainer'.

Jag slängde även med en DIV för rubriken på toppen.