Forum PHP.pl > [css] divy obok siebie = brak obramowania

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [css] divy obok siebie = brak obramowania

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

wujek_bogdan

29.03.2008, 02:17:24

chcę aby divy zanjdujące się wewnątrz diva "containter" byłu obramowane ramką o szerokości 1px;
wszystko jest ok dopóki nie dodam float:left; (divy mają być obok siebie a nie jeden pod drugim).
gdy dodaje float:left; ramka zamiast obejmować divy obejmuje tylko jeden górny piksel :/

css wygląda tak:

Kod

#container {
margin-top: 10px;
margin: 0px auto;
width: 965px;
height: auto;
padding:0px;
border-style: solid;
border-color: #000;
border-width: 1px;
}

#left {
float:left;
text-align: left;
width: 200px;
border-style: solid;
border-top-width: 0px;
border-left-width: 1px;
border-right-width: 0px;
border-bottom-width: 0px;
   }

#center {
float:right;
text-align: left;
   }

#right {
float:right;
width: 200px;
   }

a html tak:

Kod

<div id="container">

     <div id="left"><p>jakaśtreść1</p>
     </div>

     <div id="center"><p>jakaśtreść2</p>
     </div>

     <div id="right"><p>jakaśtreść3</p>
     </div>
</div>

woj_tas

29.03.2008, 10:19:25

Elementy floatowane "wyskakują" ze swojego rodzica. Dodaj do containera:

[HTML] pobierz, plaintext 
overflow:hidden;
[HTML] pobierz, plaintext

nevt

29.03.2008, 10:21:53

dodaj do html:

[HTML] pobierz, plaintext 
<div id="container">
   <div id="left"><p>jakaśtreść1</p></div>
   <div id="center"><p>jakaśtreść2</p></div>
   <div id="right"><p>jakaśtreść3</p></div>
  <div style="clear:both"></div>
</div>
[HTML] pobierz, plaintext

wujek_bogdan

29.03.2008, 20:28:50

thx woj_tas

pomogło. temat do zamknięcia.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.