divy o tych samych wysokościach(float: left)

0

Witam,

Mam coś takiego:

<style>
#A{
  background-color: #8888FF;
  float: left;
  width: 200px;
}

#B{
  background-color: #FF8888;
  float: left;
  width: 200px;
}

</style>
<div>
<div id="A">1<br>2</div>
<div id="B">4<br>5<br>6</div>
</div>

Jak zrobić aby divy były dociągnięte do wysokości "rodzica"? Mam na stronie 3 divy, lewy pasek, środkowy(treść) i prawy pasek, chcę aby ich wysokość była taka sama(zależna od najwyższego diva). Robiłem z overflow: hidden;(wyczytałem z neta) ale ten obcina mi border-bottom i jest mało profesjonalne. Javascript odpada....

0
<style>
#A{
  background-color: #8888FF;
  height:100%;
  width: 200px;
  display:inline-block;
}
 
#B{
  background-color: #FF8888;
  height:100%;
  width: 200px;
display:inline-block;
}
 
#P{
 height: 250px;
}


</style>
<div id="P">
<div id="A">1<br>2</div>
<div id="B">4<br>5<br>6</div>
</div>

Wprowadziłem małą redundancję styli - ale poradzisz sobię.

0

Jeśli zawartość danego diva będzie wyższa od 250px to mi zawartość wylezie poza div... a poza tym chcę aby wysokość "P" dostosowywała się do elementów wewnątrz, czyli raczej nie może być zdefiniowane height dla "P".

0

Taki efekt tabeli...
może pokombinuj z display, są różne opcje table też.

0

Najprościej zastosować technikę CSS zwaną Faux Columns (zob. http://www.alistapart.com/articles/fauxcolumns/ ). Chodzi Ci tylko o to, by lewa strona pewnej części ekranu z dwoma kolumnami miała niebieskie tło, a prawa czerwone. W przykładzie Twoje kolumny mają 200 px szerokości. Przygotuj obrazek o szerokości 200px i wysokości dowolnej (może być 1px, ale tak proste obrazki w PNG się dobrze kompresują, więc może być i 100px). Lewą połowę obrazka wypełnij niebieskim kolorem, prawą -- czerwonym. Umieść obrazek w tle elementu zawierającego (!), daj mu repeat-y i zastosuj jakiś clearfix (np. daj overflow: hidden elementowi zawierającemu). Będzie to wyglądało tak, jakby kolumny miały równą wysokość. Umieszczony w tym miejscu overflow: hidden nie obetnie żadnego border-bottoma itp. Nigdzie też nie będziesz musiał definiować wysokości.

1 użytkowników online, w tym zalogowanych: 0, gości: 1