CSS3 paragraf <p> nachodzi na <div> (3 kolumny)

Mam problem, z pozycjonowaniem elementów za pomocą CSS. W zależności od szerokości okna przeglądarki (FF) dzieją się różne rzeczy - najczęściej niepożądane :(

Mam div "3 kolumny" - wrzucam tam tekst i wyświetla go w ramkach, jednak jak zwęże okno przeglądarki, to tekst się wylewa - pionowe kolumny przybierają za duży rozmiar i zasłaniają to co jest w dalszej części dokumentu (kolejne divy czy paragrafy p z tekstem, itd.).

Wrzucam kod:

 

<style>

.p {
    position: static;
	border: auto;
 
}


#kolumny3 {
   width: 100%;
   height: 300px;  
   position: static;
   margin: auto; 
   border: solid 1px black;
}
#lewa { 
position: static;
   float: left; 
   width: 40%;
   position: relative;
   top: 5px;   
   border: solid 1px red;
   overflow-x: hidden;
   overflow-y: hidden;
   text-align: left;
}
#srodek { 
position: static;
   float: left; 
   width: 29%;
   position: relative;
   top: 5px;    
   border: solid 1px blue; 
   overflow-x: hidden;
   overflow-y: hidden;
   text-align: left;
}
#prawa { 
position: static;
   float:right; 
   width: 30%; 
   position: relative;
   top: 5px;   
   border: solid 1px red;  
   overflow-x: hidden;
   overflow-y: hidden;
   text-align: left;
}

</style>

Tu html:

<div id="kolumny3"> 
<div id="lewa">
Najwyższa wydajność do obsługi najbardziej wymagających zadań dzięki procesorowi Intel Core i7 czwartej generacji. Wszystkie najbardziej wymagające zadania – obsługa grafiki HD i 3D, wielozadaniowość i multimedia – są przetwarzane przez procesory Intel Core i7 czwartej generacji w sposób, który zauważysz i poczujesz. Za automatyczne przyśpieszanie pracy procesora w razie potrzeby odpowiada technologia Intel Turbo Boost 2.0.
Niesamowita wydajność i wspaniała grafika w najlepszym wydaniu
</div>
<div id="srodek">
Najwyższa wydajność do obsługi najbardziej wymagających zadań dzięki procesorowi Intel Core i7 czwartej generacji. Wszystkie najbardziej wymagające zadania – obsługa grafiki HD i 3D, wielozadaniowość i multimedia – są przetwarzane przez procesory Intel Core i7 czwartej generacji w sposób, który zauważysz i poczujesz. Za automatyczne przyśpieszanie pracy procesora w razie potrzeby odpowiada technologia Intel Turbo Boost 2.0.
Niesamowita wydajność i wspaniała grafika w najlepszym wydaniu
</div>
<div id="prawa">
Najwyższa wydajność do obsługi najbardziej wymagających zadań dzięki procesorowi Intel Core i7 czwartej generacji. Wszystkie najbardziej wymagające zadania – obsługa grafiki HD i 3D, wielozadaniowość i multimedia – są przetwarzane przez procesory Intel Core i7 czwartej generacji w sposób, który zauważysz i poczujesz. Za automatyczne przyśpieszanie pracy procesora w razie potrzeby odpowiada technologia Intel Turbo Boost 2.0.
Niesamowita wydajność i wspaniała grafika w najlepszym wydaniu
</div>
</br></br></br></br>
</div>

<p>
Niestety, ale ten paragraf nachodzi na div "3 kolumny" - wszystko zależy od szerokości przeglądarki. Niestety, ale ten paragraf nachodzi na div "3 kolumny" - wszystko zależy od szerokości przeglądarki. Niestety, ale ten paragraf nachodzi na div "3 kolumny" - wszystko zależy od szerokości przeglądarki. Niestety, ale ten paragraf nachodzi na div "3 kolumny" - wszystko zależy od szerokości przeglądarki. Niestety, ale ten paragraf nachodzi na div "3 kolumny" - wszystko zależy od szerokości przeglądarki. Niestety, ale ten paragraf nachodzi na div "3 kolumny" - wszystko zależy od szerokości przeglądarki. Niestety, ale ten paragraf nachodzi na div "3 kolumny" - wszystko zależy od szerokości przeglądarki. Niestety, ale ten paragraf nachodzi na div "3 kolumny" - wszystko zależy od szerokości przeglądarki. Niestety, ale ten paragraf nachodzi na div "3 kolumny" - wszystko zależy od szerokości przeglądarki. Niestety, ale ten paragraf nachodzi na div "3 kolumny" - wszystko zależy od szerokości przeglądarki. Niestety, ale ten paragraf nachodzi na div "3 kolumny" - wszystko zależy od szerokości przeglądarki. Niestety, ale ten paragraf nachodzi na div "3 kolumny" - wszystko zależy od szerokości przeglądarki. Niestety, ale ten paragraf nachodzi na div "3 kolumny" - wszystko zależy od szerokości przeglądarki. Niestety, ale ten paragraf nachodzi na div "3 kolumny" - wszystko zależy od szerokości przeglądarki. Niestety, ale ten paragraf nachodzi na div "3 kolumny" - wszystko zależy od szerokości przeglądarki. Niestety, ale ten paragraf nachodzi na div "3 kolumny" - wszystko zależy od szerokości przeglądarki. Niestety, ale ten paragraf nachodzi na div "3 kolumny" - wszystko zależy od szerokości przeglądarki. Niestety, ale ten paragraf nachodzi na div "3 kolumny" - wszystko zależy od szerokości przeglądarki. Niestety, ale ten paragraf nachodzi na div "3 kolumny" - wszystko zależy od szerokości przeglądarki. Niestety, ale ten paragraf nachodzi na div "3 kolumny" - wszystko zależy od szerokości przeglądarki. Niestety, ale ten paragraf nachodzi na div "3 kolumny" - wszystko zależy od szerokości przeglądarki. Niestety, ale ten paragraf nachodzi na div "3 kolumny" - wszystko zależy od szerokości przeglądarki. Niestety, ale ten paragraf nachodzi na div "3 kolumny" - wszystko zależy od szerokości przeglądarki. Niestety, ale ten paragraf nachodzi na div "3 kolumny" - wszystko zależy od szerokości przeglądarki. Niestety, ale ten paragraf nachodzi na div "3 kolumny" - wszystko zależy od szerokości przeglądarki. 
</p>

 

Nie jestem pewien czy dobrze zrozumiałem, ale chyba wystarczy dodać deklarację overflow:auto do reguły #kolumny3 - poczytaj o CSS clearfix

Usuń wysokość, którą ustawiłeś na sztywno dla #kolumny3.

height = 300 usunąłem, ale pomogło generalnie wstawienie 4-go diva na dole z clear : both; (na co naprowadził mnie krokodyl). DZIEKI!

Krzywy Pomidor

Dodawanie kolejnego diva jest niepotrzebne, jeśli zależy ci na lepszej jakości kodu, ale jeśli to tylko jakaś zabawa, to oczywiście wtedy to nie ma znaczenia. Przy okazji możesz usunąć wszystkie position: static;, bo to i tak ustawienie domyślne.

To jak to powinno się to zrobić, żeby było elegancko?
Krzywy Pomidor

Na przykład tak:

* {
	box-sizing: border-box;	
}
 
#kolumny3 {
   border: solid 1px black;
   padding-top: 5px;
   overflow:auto;
   margin-bottom: 20px;
}
#lewa { 
   float: left; 
   width: 40%;
   border: solid 1px red;
}
#srodek { 
   float: left; 
   width: 30%;
   border: solid 1px blue; 
}
#prawa { 
   float:left; 
   width: 30%; 
   border: solid 1px red;
}

Kod HTML pozostaje bez zmian.