innehåll i box hamnar utanför

Hej

Har en box och problemet är att det innehåll hamnar utanför, alltså boxen sträcks inte ut??
såhär är koden

 
             <div class="content">
                   <div id="leftSec">fdfd</div>
                   <div id="rightSec">fdfd<br />jjlkjjlkjk<br />kklöjdöslkdsö</div>      
              </div>

css:
.content {padding: 20px; text-align:left;}
#leftSec{width:600px; float:left; border:1px solid black;}
#rightSec{width:250px; float:left; border:1px solid black;}

ni kan se hur fel det blir på http://www.heta.se/vs/

Vet inte riktigt vad jag ska göra??
Mvh

CSS

.clear{
clear:both;
}

<div class="content">
                   <div id="leftSec">fdfd</div>
                   <div id="rightSec">fdfd<br />jjlkjjlkjk<br />kklöjdöslkdsö</div>    
<div class="clear"></div>  
              </div>

Prova det där

Haha va lätt, klockrent..

Är det så man ska göra eller är mitt upplägg fel redan från början??

Tack iaf!

evilaid skrev:

Haha va lätt, klockrent..

Är det så man ska göra eller är mitt upplägg fel redan från början??

Tack iaf!

Lägger du in en float, så fortsätter den att påverka element längre ner i koden.
Genom att lägga in en clear efter, så avbryter du float-attributet så att detta inte sker.
Kort förklaring.

ditt upplägg är inte fel, det är typ sådär man måste göra.
Dock behöver elementet som har klass="clear" inte vara en tom div, utan kan lika gärna vara något annat element som har en logisk anledning att vara där, tex en <hr class="clear"> .vill man inte att den skall synas så sätter man bara visibilty:hidden på den.

En hr har dessutom (i min värld) en större "semantisk" betydelse än en tom div
(för exempel se http://fjolnir.ebpatour.eu/fb/minimalism.html)