Design problem: Div i div med float

Det behøver, altså ikke være så kompliceret: http://jsfiddle.net/vaff/sJb8Y/9/

Det er selvfølgelig noget man lige skal vænne til, men har prøvet at lave et lille eksempel her til dig uden brug af clear.
Prøv at se her: http://jsfiddle.net/sJb8Y/2/

Problemet i denne løsning er at dit indhold i disse ikke flytter andet indhold på samme måde og derfor man skal lære brug af clear. Det er fordi en float ikke indgår i positionering på samme måde og under samme regelsæt som andre block elementer og herfor skaber det "problemer" som man skal lære at håndtere, fordi det er anderledes end hvad man normalt løser det med.
Hvis du prøver at se her for eksempel så kan du se problematikken: http://jsfiddle.net/sJb8Y/3/

Derfor man skal lære at bruge clear. Det sørger for at den næste div vil flytte sig til underkanten af indholdet over. Fx hvis du har flere div'er (4-5) ved siden af hinanden i forskellige højde så er det den rette løsning.

Se her: http://jsfiddle.net/sJb8Y/5/

Det er nok den løsning de fleste bruger og kender, men det kræver at du indsætter et element efter og hvis dine floats er det sidste på din side inden din footer kan det virke lidt fjollet.
Der er en nyere og smartere måde at gøre det på.
Her bruger du :after som du er sikker på virker for er en CSS2 property.
Så du ikke selv skal lave elementet som skjules, får indhold og bliver lavet til et block-element samt selv sikrer dit clear-trick.
Dette kan ses her: http://jsfiddle.net/sJb8Y/6/

Håber det var en passende forklaring og hjælper dig lidt

Jeg tror vidst ikke jeg fik uddybet hvad problemet egentlig er :

Jeg har lavet flere divs inde i andre divs. Men når jeg bruger floats på de indre divs forbliver de ikke heri.

Hvis du vil gøre det nemt så gør du en lille ændring.
#Wrapper skal have en div #pictures, med #pic1 og #pic2 som har float: left;
Efter denne #pictures ligger du så din #content.

Ellers skal du se nærmere på clear: both i CSS som er noget man bør kende når man bruger floats for at kunne få de fleste design til at fungere korrekt.

Jeg antog det var fordi du ikke kunne få dine #pic1 og #pic2 til at fungere korrekt.

Hvis jeg laver #wrapper til at fylde lad os sige 400px i bredden og lad vil den indre div sat til float=right sidde udenfor #wrapper.

Også hvis der er sat clear:both til.

csharper: Kanon! Det er faktisk præcis det jeg ledte efter. Det er sjovt det ikke har virket for mig tidligere - det var præcis sådan jeg forestillede mig det skulle virke, men et eller andet sted har jeg lavet noget rod.

Jeg tror muligvis problematikken har været, som du også nævner, i forkert brug af clear. Men jeg har fået det løst nu, efter noget bøvlen.

Men kan det virkelig passe, at det skal være så bøvlet, at lave et simpelt design? Eller ville du gribe det anderledes an, hvis du skulle lave konceptet fra bunden?

@Jacob
Det er kun bøvlet fordi det måske ikke er sådan du er vant til at lave dit design. Det handler i bund og grund mest om at få det under neglene så du ved hvordan det kan gøres - men dan's løsning var jo meget simpel som du kunne se

Du kan bruge float, hvor du skal gøre lidt ting lidt anderledes, ellers så se nærmere på at lave dine elementer til display:inline-block - så fylder de kun det plads som der er indhold til. Igen er det en anderledes måde at lave tingene på hvor du skal lære at mestre det på.

Har du prøvet display:table på den yderste DIV?
det gør det oftest nemmere at bruge float på divs inden i.