Три div-а един до друг

L

logic

Registered
Здравейте! Отдавна не съм писал тук, но се оказа, че ми трябва помощ, понеже почнах едно ново проектче (ще видим какво ще стане), и се сетих да попитам тук.. Та, искам да направя така че три div-а да са един до друг.. Пробвах, четох.. Сложих float:left; , не става.. Може би ще искате кода.. така че:
Код: 
HTML:
<div id="novi_pesni">
											<div class="head">НОВИ ПЕСНИ</div>
											<div class="nova_pesen">
												<img src="css/img/nova-pesen.gif" alt="NOVA PESEN" class="nova-pesen-kartinka" /> <br/>
													<div class="nova_pesen-zaglavie"><a href="#">BATE SA-POETITE NE SPYAT</a></div>
													
														<div class="nova_pesen-tekst">Песен от най-новият албум на Бате Сашо</div>
														
														<center><a href="#"><img src="css/img/novina-oshte.gif" class="nova_pesen-oshte" /></a></center>
											</div>
											
											<div class="nova_pesen">
												<img src="css/img/nova-pesen.gif" alt="NOVA PESEN" class="nova-pesen-kartinka" /> <br/>
													<div class="nova_pesen-zaglavie"><a href="#">BATE SA-POETITE NE SPYAT</a></div>
													
														<div class="nova_pesen-tekst">Песен от най-новият албум на Бате Сашо</div>
														
														<center><a href="#"><img src="css/img/novina-oshte.gif" class="nova_pesen-oshte" /></a></center>
											</div>
											
											<div class="nova_pesen">
												<img src="css/img/nova-pesen.gif" alt="NOVA PESEN" class="nova-pesen-kartinka" /> <br/>
													<div class="nova_pesen-zaglavie"><a href="#">BATE SA-POETITE NE SPYAT</a></div>
													
														<div class="nova_pesen-tekst">Песен от най-новият албум на Бате Сашо</div>
														
														<center><a href="#"><img src="css/img/novina-oshte.gif" class="nova_pesen-oshte" /></a></center>
											</div>
										</div>

Код: 
CSS:
#novi_pesni { float: left; margin-left: 50px; margin-top: 15px;}

.head { background: url('img/novi-pesni.gif'); height: 22px; width: 120px; font-size: 14px; border: 1px solid #b2b2b2; font-style: italic; text-align: center; padding-top: 5px; color: #181818; }

.nova-pesen { width: 115px; float: left; height: 82px; margin-top: 10px; border: 1px solid black; margin-left: 1px;}

.nova-pesen-kartinka { width: 115px; height: 82px; margin-top: 10px; border: 1px solid black; margin-left: 1px;}

.nova_pesen-zaglavie { color: #111111; width: 115px; margin-top: 5px; margin-left: 1px; font-weight: bold; font-size: 12px; }

.nova_pesen-zaglavie  a { color: #111111; font-weight: bold; font-size: 12px; }

.nova_pesen-tekst { width: 115px; margin-top: 5px; margin-left: 1px; font-style: italic; font-size: 11px; }

.nova_pesen-oshte { border: 1px solid #363636; margin-top: 15px; }
Благодаря предварително!

EDIT:
Ето как изглежда в момента:
4635.jpg


И как трябва да изглежда..:
4636.jpg
 
Благодаря ви и на двамата за бързите отговори, но не става така..
Имам един по-голям див, който също има float:left; , и в него имам три div-а с един и същи class, на които също съм им задал float: left, но вижте какво се получава:
4635.jpg


Как трябва да изглежда:
4636.jpg
 
Я пробвай 3-то дива да са с един и същи клас на който има float:left смисал да се получи като моя пример
 
Giorgio каза:
Я пробвай 3-то дива да са с един и същи клас на който има float:left смисал да се получи като моя пример
Увеличете...
Виж html кода, който съм дал по-горе..
 
По-големия div ако има фиксирана ширина, която е по-малка от самите кутийки, така ще се получава...
 
djman каза:
По-големия div ако има фиксирана ширина, която е по-малка от самите кутийки, така ще се получава...
Увеличете...
Зададох на по-големия div 350px, сега само бутоните "Още" отиват по средата на страницата, а другите неща не се мърдат..
 
[css]

#box {
width: kolkoto ti trqbva
height: kolkoto ti trqbvwa
}

#left {
width: tvoqta
height: tvoqta
float:left;
clear: both
}

#center {
height: tvoqta
width: tvoqta
float: left;
clear: right;
}
#right {
width: tvoqta;
height: tvoqta;
float: left;
clear: right;
}[/css]


HTML: 
<div id="box">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
 
Явно нещо от кода ти дъни цялата работа проиграх кода на goshkoy и стана. Защо не пренапишеш всичко наново, като първо направиш 3-те кутийки и след това добавиш другите работи
 
Направи го поне 400 пиксела, картинката която си дал "как трябва да бъде" е 406 пиксела на дължина...

HTML: 
<div class="stack">
    <div class="box">content</div>
    <div class="box">content</div>
    <div class="box">content</div>
</div>

[css].stack { width: 450px; }
.box { width: 150px; float: left; }[/css]
 
Giorgio каза:
..
Увеличете...
Благодаря ви Безкрайно МНОГО, момчета!!!! Направих го наново и видях къде ми е грешката.. В случая, всички ми помогнахте, но ще дам точката на Giorgio, защото последното му предложение (за което не можах да се сетя :shock: ) ми помогна. Надявам се да не се сърдите.. Може пак често да се срещамее!! ^^ Благодаря ви пак искрено!!!
 
Също може някой див от страните да ги притиска тези кутии, ако му е зададен някой отрицателен маргин.
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе