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>
HTML 