Подреждане на кутийки

L

lub4o

Registered
Здравейте, пробвам да кодирам един дизайни съм го кодирал само до тук

9f1f82ae928dc0ac.JPG


и сега искам да сложа една кутийка посредата съответно там да се пишат новини, но това е проблема не мога да позиционирам котийката посредата

ето html

Код: 
<body>
<div id="kazan">
	<div id="kazanmarg">
	<div id="logokar">
    	<div id="logo"></div>
    </div>
    
    <div id="menu">
    	<div class="butoni">
        	<a href="abv.bg">Начало</a>
            <a href="abv.bg">Продукти</a>
            <a href="abv.bg">За мен</a>
            <a href="abv.bg">Меню</a>
        </div>
    
    </div>
	<div id="cont">
    	<div id="conttop">
        	Логин
        </div>
        
        <div id="contmain">
        	Тук съдържанието
        </div>
        
        <div id="contdown"></div>
        
    </div>


	


<div id="clearer"> </div>


<div id="news">
    <br />
    
    </div>
</div>
</div>
</body>


а това е CSS

Код: 
html, body
{
	height: 100%;
	background-color: #6d9bc6;
	color: #fff;
	font: 15px arial;
	margin: 0px;
	padding: 0px;
}

#kazan
{
	margin: 0 auto;
}

#logokar
{
	height: 114px;
	background-image: url(image/back.gif);
	background-repeat: repeat-x;
	margin: 0 auto;
}

#logo
{
	width: 448px;
	height: 114px;
	background-image: url(image/logosite.gif);
	background-repeat: no-repeat;
}

#menu
{
	height: 52px;
	background-image: url(image/menu.gif);
	background-repeat: repeat-x;
	
	
}

#clearer
{
	clear: both;
}

div.butoni
{
	width: 400px;
	
}

div.butoni a
{
	text-decoration: none;
	float:left;
	padding: 15px 15px 15px 15px;
	color: #fff;
	font-size: 18px;
	font: Arial, Helvetica, sans-serif;
}

div.butoni a:hover
{
	background-image: url(image/menuli.gif);
}

#cont
{
	width:  212px;
	
}	

#conttop
{
	background-image: url(image/polence.gif);
	background-repeat: no-repeat;
	width: 212px;
	height: 43px;
	font-size: 17px;
	font-weight: bold;
	padding-top: 10px;
	padding-left: 75px;
	margin-top: 5px;
	margin-left: 5px;
	position: relative;
	cursor: move;
}

#contmain
{
	background-image: url(image/white.gif);
	background-repeat: no-repeat;
	width: 186px;
	height: 184px;
	margin-top: -10px;
	margin-left: 16px;
	color: #000;
	padding-left: 5px;
	position: relative;
	
}
#kazanmarg
{

}

#contdown
{
	background-image: url(image/whitedown.gif);
	background-repeat: no-repeat;
	width: 187px;
	height: 9px;
	margin-left: 17px;
	position: relative;
}

#news
{
	
	float:left;
	
	
}


създадох един див news и го флотват в ляво не си седи по Логин и не става може ли малко хелп
 
Задай му ширина:
html, body
{
height: 100%;
background-color: #6d9bc6;
color: #fff;
font: 15px arial;
margin: 0px;
padding: 0px;
}

#kazan
{
margin: 0 auto;
width:150px; /* примерна ширина */
}

#logokar
{
height: 114px;
background-image: url(image/back.gif);
background-repeat: repeat-x;
margin: 0 auto;
}

#logo
{
width: 448px;
height: 114px;
background-image: url(image/logosite.gif);
background-repeat: no-repeat;
}

#menu
{
height: 52px;
background-image: url(image/menu.gif);
background-repeat: repeat-x;


}

#clearer
{
clear: both;
}

div.butoni
{
width: 400px;

}

div.butoni a
{
text-decoration: none;
float:left;
padding: 15px 15px 15px 15px;
color: #fff;
font-size: 18px;
font: Arial, Helvetica, sans-serif;
}

div.butoni a:hover
{
background-image: url(image/menuli.gif);
}

#cont
{
width: 212px;

}

#conttop
{
background-image: url(image/polence.gif);
background-repeat: no-repeat;
width: 212px;
height: 43px;
font-size: 17px;
font-weight: bold;
padding-top: 10px;
padding-left: 75px;
margin-top: 5px;
margin-left: 5px;
position: relative;
cursor: move;
}

#contmain
{
background-image: url(image/white.gif);
background-repeat: no-repeat;
width: 186px;
height: 184px;
margin-top: -10px;
margin-left: 16px;
color: #000;
padding-left: 5px;
position: relative;

}
#kazanmarg
{

}

#contdown
{
background-image: url(image/whitedown.gif);
background-repeat: no-repeat;
width: 187px;
height: 9px;
margin-left: 17px;
position: relative;
}

#news
{

float:left;


}
Увеличете...
 
Зададох му ширина 100% и сложих на news float: right и ето къде отива

2bcc7ac3a06ac480.JPG
отива там и седи по другата кутийка а като му задам флоат лефт; си седи на същото място на мен ми трябва посредата горе :oops:
 
Код: 
float: left;
margin-left: 200px; /*Това увеличаваш/нямаляваш докато постигнеш това, което искаш*/
 
Код: 
<div id="login"> code </div>
<div id="news">
<div>новина 1</div>
<div>новина 2</div>
</div>
<div class="clear"></div>

#login{
float:left;
width:200px;
}

#news{
float:left;
width:300px;
}

.clear{
clear:both;
}




Ето ти пример .
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе