[問題] css兩欄式排版問題

[ooopooo (歐歐歐批歐歐歐)]

http://www.jsfiddle.net/onesan/MYNEj/

如網頁所呈現
我想達到的版型如下
╭────────╮
│┌────┐╭╮│
││╭──╮││││
│││    │││││
│││    │││││
││╰──╯││││
│└────┘╰╯│
╰────────╯

標籤命名：
最外框（紅）       #all
左半部(粉紅)       #leftside
左半部內容(綠)     #inside
右半部(藍)         #rightside


請問為什麼當我把 #leftside 的margin-right 設定成負的 #rightside 寬度
才能顯示正常？

可否解釋一下 為何跟我的認知不太一樣 負的不是應該要在螢幕外嗎？ 怎麼是內縮了？
感謝各位熱心解答～


--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 124.11.212.243
※ 編輯: ooopooo         來自: 124.11.212.243       (01/08 00:40)
→ arrack:http://ppt.cc/Ld9J
推 fet0124:http://jsfiddle.net/MYNEj/25/ 試著調整了一下 應該是把
→ fet0124:leftside跟rightside的寬度設定關係吧@@
推 terlin10:初步看一下，應該是寬度設定的關係
→ terlin10:css的觀念還要再加強一下
→ superpai:正的表示邊界往外 負的表示邊界往內
→ superpai:你紫色#leftside也畫錯了，應該要跟#all一樣寬
→ superpai:也就是雖然#leftside和#all一樣寬，但是利用負邊界
→ superpai:讓#rightside可以往上跑