[HTML][CSS]Kilka divów obok siebie. Opcje

[Gruchol]

Witam,
Mam takie dwa divy :

[HTML] pobierz, plaintext 
<div class="1">
						 	<img class="img-circle" src="obrazek1" style="width: 140px; height: 140px;">
         					 	<h2>Opis</h2>
         					 	<p>Opis2</p>
         					 	<p><a class="przycisk" href="show.php?id=11" role="button">Wyslij</a></p>
       						 </div>
[HTML] pobierz, plaintext 

( 2 są takie same dla testu )

I chcę aby te obrazki razem z przyciskami były obok siebie, i oddzielał je np. margines 10px.
Jak wklejam te divy to jest jeden pod drugim.
Żadnego cssa nie stosowałem do tego na razie bo nawet nie wiem jak to zacząć.

Z góry dziękuję i pozdrawiam.

Ten post edytował Gruchol 20.01.2015, 07:14:34

[Lord]

[HTML] pobierz, plaintext 
div.jeden{
 width: 45%;
 float: left;
 margin-right: 10%; 
}
 
div.dwa{
 width: 45%;
 float: left;
}
[HTML] pobierz, plaintext 

Dwa divy maja być koło siebie?
div domyślnie ma 100% szerokości jaka mu pozostawiłeś, wiec musisz nadać mu szerokość i następnie dać float: left lub right w zależności do której strony chcesz równać

[Gruchol]

Tzn. chciałbym otrzymać mniej więcej taki efekt :
http://screenshooter.net/101736853/gduyfgg

[fate]

To spróbuj tak:
http://jsfiddle.net/kupn748w/

[Gruchol]

Nie można tego jakoś łatwiej zrobić ?
Dopiero się uczę i taki zapis to dla mnie czarna magia.

Pisałem tamten post z telefonu i tak teraz patrzę, że to jest wklejony obrazek i tyle.. ja chcę aby tam działał przycisk itp.
Do tego jakieś zapisy typu :

[HTML] pobierz, plaintext 
<p style="text-align: justify"><img id="logo2" alt="ScreenShooter" width="64" height="40" style="float: left" src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=" />ScreenShooter służy do szybkiego robienia zrzutów ekranu i łatwego wysyłania ich do sieci.</p>
        <p style="text-align: justify">Wystarczy, ze klikniesz &quot;Zrzut ekranu&quot; (lub klawisz F9), zaznaczysz obszar a w schowku znajdziesz gotowego linka. Teraz każdy, kto otrzyma linka, bedzie mógł zobaczyć Twój zrzut ekranu.</p>
        <p class="ZzZail">Jeżeli masz uwagę odnośnie działania serwisu, albo chcesz zgłosić nadużycie napisz o tym na adres: <a class="ZzZail" href="mailto:SSShelpXXXgZZZl.com">SSShelpXXXgZZZl.com</a></p>
        <a class="btn" href="/screenshooter-setup.exe">Pobierz program ScreenShooter</a>
[HTML] pobierz, plaintext 

o co tutaj chodzi ..?

[fate]

wstaw kod ktory masz na
http://jsfiddle.net/
to ci poprawie

[Gruchol]

http://jsfiddle.net/6b4g9ryj/ to jest mój kod.
Z góry dzięki za pomoc ;p

[fate]

wystarczyło dodac: .col-lg-3{float:left;margin:10px;} ale dodałem

[HTML] pobierz, plaintext 
.col-lg-3{float:left;margin:10px;background: #eee;border-radius:3px;padding:10px}
.col-lg-3 p a{text-decoration:none; border:2px solid #aaa; padding: 5px 10px;color:#222;background:#ddd}
.col-lg-3 p a:hover{background:#fff}
[HTML] pobierz, plaintext 

http://jsfiddle.net/6b4g9ryj/1/