[CSS][HTML]2 divy obok siebie Opcje

[tomkowy]

Witam, mam pewien problem, mianowicie chcialbym ustawic 2 divy obok siebie i niestety cos nie smiga. i zastanawiam sie gdzie jest blad.

[HTML] pobierz, plaintext 
      <div class="content">
 
        <div id="text-1">
          <p>teksty</p> 
        </div>
 
      	<div id="text-2">
          <p>teksty</p>
        </div>
 
      </div>
[HTML] pobierz, plaintext 

i taki o to css:

[CSS] pobierz, plaintext 
.content{
	width: 960px;
	min-height: 400px;
	position: relative;
	left: 50%;
	margin: 0px 0px 0px -480px;
	border: 1px solid black;
	overflow: visible;
 
}
 
#text-1, #text-2{
	width: 270px;
}
 
#text-1 p, #text-2 p{
	margin: 0;
	padding: 0;
	text-align: justify;
}
 
#text-1, #text-2{
	position: absolute;
}
 
#text-2{
	margin: 0px 0px 0px 285px;
}
[CSS] pobierz, plaintext 

aktualnie wyglada to tak:

Kod

http://img840.imageshack.us/img840/6937/przechwytywaniehg.png

chce zeby tekst byl w ramce i zeby z niej nie wychodzil i aby element z ramka zwiekszal dlugosc gdy jest tego potrzeba.

//edit

okej juz sobie poradzilem. dzieki za pomoc i tak. moze wyjasnie jak udało mi się to zrobić.

zrobiłem to na liście wypunktowanej, ustawiłem elementy na relative, dałem float i w sumie nie uzyskałem nic innego jak tutaj. kluczowym elementem było stworzenie nowego <p> z właściwością clear: both; można powiedzieć ze robi to nam taki separator, taka prosta linia która wyrównuje wszystko. wszystko działa git teraz.

Ten post edytował tomkowy 10.12.2010, 01:13:39

[mls]

Można prościej, jeśli już koniecznie na listach wypunktowanych:

[HTML] pobierz, plaintext 
<ul>
    <li>kolumna 1</li>
    <li>kolumna 2</li>
</ul>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
ul { overflow: hidden; list-style: none }
li { float: left; width: 50%; }
[CSS] pobierz, plaintext