webForumDet fria alternativet

innehåll i box hamnar utanför

HTML & CSS

4 svar · 704 visningar · startad av evilaid

Medlem sedan apr. 2009433 inlägg
Frågan#1

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

Medlem sedan juli 2001728 inlägg
#2
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

Medlem sedan apr. 2009433 inlägg
#3

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!

Medlem sedan aug. 20068 090 inlägg
#4

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.

Medlem sedan okt. 2007446 inlägg
#5

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)

255 ms totalt · 4 externa anrop · v20260731065814-full.86ec41c2
122 ms — deklarationer (db)
0 ms — hämta statistik (cache)
129 ms — hämta tråd, inlägg och bilagor (db)
121 ms — ändringar (db)