WN - Responsiv css problem

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Responsiv css problem (https://www.wn.se/forum/showthread.php?t=1061345)

Responsiv css problem

Hello fellow ninjas!

Har funderat på detta problem ett tag, men själv aldrig riktigt behövt brottas med problemet (än).

Vi nog de flesta av oss vad som menas med "följsam" design, och vad jag tänker mest på är just "följsam", inte "hoppande" som man även kan välja att skriva sin css som. Med hoppande menar jag att man skriver ett fast antal pixlar istället för att gå på %.

Problemet jag funderar på uppstår när man vill att ett element skall alltid vara ett visst antal pixlar medans resten skall vara inom %.

Låt oss ta ett exempel:

Jag har en sida där jag har en sidpanel till vänster och all resterande content till höger. [sidpanel] [ content ]

Säg nu att jag vill att sidpanelen alltid skall vara 200px bred, men att content skall förminskas i led med webbläsaren när den förminskas.
Jag hade gärna velat gjort något sånthär:

Kod:

#sidpanel {width:200px;}

#content {width:80%}

Som ni kanske förstår så går inte detta, eftersom att content-delen någon gång kommer att vara mindre än just 80%..

Hur skulle ni lösa detta problemet?

http://jsfiddle.net/L8yA5/

Här kan ni experimentera om ni vill

Citat:

Ursprungligen postat av jonssondesign (Inlägg 20489158)

Kod:

#sidpanel {width:200px;}

#content {width:80%}

Som ni kanske förstår så går inte detta, eftersom att content-delen någon gång kommer att vara mindre än just 80%..

Hur skulle ni lösa detta problemet?

jag skulle ha gjort så här:

Kod:

<div class="sidpanel pull-left">Sidpanel</div>

<div class="content">Content</div>

Kod:

.pull-left {float:left}

.clear {clear:both}

.sidpanel {width:200px; background-color:hotpink}

.content {width:auto; margin-left:200px;  background-color:aqua}

http://jsfiddle.net/Z6BCj/

hoppas det var det du sökte.

Citat:

Ursprungligen postat av naak2803 (Inlägg 20489165)

jag skulle ha gjort så här:

Kod:

<div class="sidpanel pull-left">Sidpanel</div>

<div class="content">Content</div>

Kod:

.pull-left {float:left}

.clear {clear:both}

.sidpanel {width:200px; background-color:hotpink}

.content {width:auto; margin-left:200px;  background-color:aqua}

http://jsfiddle.net/Z6BCj/

hoppas det var det du sökte.

Oh, smart! Detta är definitivt en lösning! Tack

Någon annan som sitter på en annan lösning?