Гаден "padding"

bobsona_master

Registered
Здравейте,
Имам един много гаден проблем, който се появи снощи, след като направих бокса с новините :
http://store.picbg.net/pubpic/3D/A6/580a98a705e93da6.png
Виждате ли как ако сложа съдържание в бокса с новините, логина вляво и screenshots бокса "падат" надолу според съдържанието в бокса с новините.
Кутията за новините се разширява вертикално според съдържанието.
Ето и код.
HTML :
HTML:
	<div id="containertop">
			</div>
       <div id="containercenter">
	   <div class="containercentertext">
	   <div id="newstitle">
Новини
</div>
 <div id="news">
Здравейте, и добре дошли в WebRacers.NET<br />
kvo<br />
kvo
</div>
	   <div class="login">
<form action="" method="post">
  Потребител: <input type="text" name="user" /><br />
         Парола: <input type="password" name="password" /><br />
  <a href="forgotten-password.php">Забравена парола ?</a> | <a href="registration.php">Регистрация</a><br /><br />
  <input type="submit" value="Влез" />
</form>
</div>
<div id="screenshots">
<img src="images/screenshots/screenshot.png" width="276" height="109"><br /><br /><br /><br />
<img src="images/screenshots/screenshot.png" width="276" height="109">
</div>
       </div>
	 
	  
	   </div>
<div id="containerbottom">
</div>

CSS :
[css]#containertop {
width:941px;
height:31px;
background:url(images/containertop.png) no-repeat;
background-position:center;
margin-top:50px;
margin-left:220px;
}

#containercenter {
color:#828282;
width:941px;
background:url(images/containercenter.png) repeat-y;
background-position:center;
margin-left:220px;
overflow:hidden;

}

#containercenter .containercentertext {
padding-left:20px;
padding-right:20px;
color:#828282;
}
.login {
margin-left: 25px;
margin-top:-60px;
background:url(images/loginback.png) repeat-y;
color:#dfdfdf;
}
#screenshots {
margin-top:20px;
margin-left: 25px;
}
#newstitle {
margin-left: 350px;
border-bottom:1px solid #080808;
border-left:0;
border-right:0;
text-align:center;
}
#news {
width:545px;
background-color:#2d2d2d;
background-repeat:repeat-y;
margin-left: 350px;
padding-left:10px;
padding-bottom: auto;
}
input {
width:159px;
height:25px;
margin:0 0 1em 0;
border:0px;
background:url('images/input.png') no-repeat;
}

#containerbottom {
width:941px;
height:68px;
background:url(images/containerbottom.png) no-repeat;
background-position:center;
margin-left:220px;
}[/css]
Благодаря предварително.
 
Тва не е от padding-а, сложи на 2те float: left / right;
На тва със снимките float: left; , а на другото float: right;
сложи им и некакъв width: в проценти.
Примерно: 20% / 80% .
 
Малко неясно ми е какво точно искаш да стане, но направи две колони както са ти казали преди мен в една колона слагаш логина и др , а в другата слагаш новините .
 
Ами искам лявата част от контента да си остане вляво и горе, където съм я сложил, а не да пада след като сложа съдържание в дясната част от контента(новините).
Edit :
Сложих няколко <br /> тага в новините, за да ви покажа за какво иде реч :
http://store.picbg.net/pubpic/BE/BE/b8874684691bbebe.png
 
Дай му [css]<div style="float:left/right;">Съдържанието тук</div>[/css]

едит: Така с <br/> ще ти се прее*е много под друга резолюция,знам го от личен опит...
 
bobsona_master каза:
Дали ще има решение на проблемът ?

Логин формата :
Код:
float:left;margin: **px **px **px **px;
Дясната част:(News)
Код:
float:right;margin:**px **px **px **px;

Направи го така и трябва да стане.
 
Nazi_93 каза:
bobsona_master каза:
Дали ще има решение на проблемът ?

Логин формата :
Код:
float:left;margin: **px **px **px **px;
Дясната част:(News)
Код:
float:right;margin:**px **px **px **px;

Направи го така и трябва да стане.
Ами аз маргините съм ги сложил
 
#news {
width:545px;
background-color:#2d2d2d;
background-repeat:repeat-y;
float:right;
padding-left:10px;
padding-bottom: auto;
}

Не слагай такива космически маргини направи го [css]float:right;margin: ** ** ** **;[/css]

а на логин:
.login {
float:left;
margin-left: 25px;
margin-top:-60px;
background:url(images/loginback.png) repeat-y;
color:#dfdfdf;
 

Back
Горе