Почему поплавок испортил вещи выше div?

У меня есть отличный рабочий код, который не работает, как я хочу его ... Но работает.Почему поплавок испортил вещи выше div?

Я хочу centerize вместо поплавка

Вот рабочий код:

Мой .css:

* { 
margin: 0; 
padding: 0; 
} 
body { background: #ededed url(../images/bg.gif) repeat-x; } 
p { 
color: #999; 
padding: 0; 
margin: 10px 0; 
font: 12px/18px Arial, Helvetica, sans-serif; 
} 
#container { 
margin: auto; 
width: 950px; 
} 
#header { 
height: 302px;c 
width: 950px; 
float: left; 
background: url(../images/header.gif) no-repeat; 
} 
#logo { margin-top: 60px; } 
#logo h1 { 
display: block; 
float: left; 
width: 503px; 
height: 57px; 
text-indent: -9999px; 
} 
#logo h1 a { 
display: block; 
width: 100%; 
height: 100%; 
outline: none; 
background: url(../images/logo.png) no-repeat 0 0; 
} 
#navigation { 
height: 38px; 
width: 950px; 
margin-top: 152px; 
float: left; 
} 
.nav-links li { 
display: inline; 
padding: 3px 25px 0 0; 
float: left; 
} 
.nav-links li a { 
text-transform: capitalize; 
color: #fff; 
text-decoration: none; 
letter-spacing: -1px; 
font: bold 14px Arial, Helvetica, sans-serif; 
} 
.nav-links li a:hover { color: #ff0; } 
.phone-number li { 
float: right; 
list-style-type: none; 
text-transform: capitalize; 
color: #fff; 
letter-spacing: -1px; 
padding-top: 3px; 
font: normal 14px Arial, Helvetica, sans-serif; 
} 
h2 { 
text-transform: capitalize; 
color: #666; 
letter-spacing: -1px; 
padding-top: 7px; 
font: bold 16px Arial, Helvetica, sans-serif; 
} 
.content-middle p { text-align: justify; } 
#content-center { 
float: right; 
width: 322px; 
margin-top: 20px; 
} 
.login-top { 
float: left; 
height: 32px; 
width: 292px; 
background: url(../images/sidebar_top.png) no-repeat; 
padding: 4px 15px; 
} 
.login-middle { 
float: left; 
width: 290px; 
padding: 5px 15px 0 15px; 
border-right: 1px solid #d3d3d3; 
border-left: 1px solid #d3d3d3; 
background: #fff; 
} 
.login-middle p { text-align: justify; } 
.login-bottom { 
float: left; 
height: 16px; 
width: 322px; 
margin-bottom: 15px; 
background: url(../images/sidebar_bottom.png) no-repeat; 
} 
#footer { 
clear: both; 
height: 111px; 
background: url(../images/footer.gif) repeat-x bottom; 
} 
#footer-content { 
height: 91px; 
width: 950px; 
padding-top: 20px; 
margin: auto; 
} 
#footer-content p { 
color: #fff; 
text-align: center; 
padding-top: 35px; 
} 

.divbuttons{text-align: center; 
} 

.login{width:25%;} 

.button { 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #89c403), color-stop(1, #77a809)); 
    background:-moz-linear-gradient(center top, #89c403 5%, #77a809 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#89c403', endColorstr='#77a809'); 
    background-color:#89c403; 
    -moz-border-radius:9px; 
    -webkit-border-radius:9px; 
    border-radius:9px; 
    border:1px solid #74b807; 
    display:inline-block; 
    color:#ffffff; 
    font-family:Verdana; 
    font-size:14px; 
    font-weight:bold; 
    padding:6px 30px; 
    text-decoration:none; 
    text-shadow:0px 1px 0px #528009; 
}.button:hover { 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #77a809), color-stop(1, #89c403)); 
    background:-moz-linear-gradient(center top, #77a809 5%, #89c403 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77a809', endColorstr='#89c403'); 
    background-color:#77a809; 
}.button:active { 
    position:relative; 
    top:1px;}

Мой Html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="icon" type="image/x-icon" href="images/favicon.ico" /> 
<title>Pachonk - Home</title> 
<base href="http://alex.piechowski.org/school/"></base> 
<link href="css/admin.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 
<script type="text/javascript" src="js/noty/jquery.noty.js"></script> 
<script type="text/javascript" src="js/noty/layouts/top.js"></script> 
<script type="text/javascript" src="js/noty/layouts/inline.js"></script> 
<script type="text/javascript" src="js/noty/themes/default.js"></script> 
<script type="text/javascript" src="js/script.js"></script> 
</head> 
<body> 
<div id="container"> 
    <div id="header"> 
    <div id="logo"> 
     <h1><a href="home">Pachonk - Your Assignments, anywhere!</a></h1> 
    </div> 
    <div id="navigation"> 
     <ul class="nav-links"> 
     <li><a href="home">home</a></li> 
     <li><a href="#">our schools</a></li> 
     <li><a href="#">applications</a></li> 
     <li><a href="#">about us</a></li> 
     <li><a href="contact">contact us</a></li> 
     </ul> 
     <ul class="phone-number"> 
     <li>free quotation - 0800 123 456</li> 
     </ul> 
    </div> 
    </div> 
    <div id="content-center"> 
    <div class="login-top"> 
    <h2>Administrator Login:</h2> 
    </div> 
    <div class="login-middle"> 
     <p>> Email confirmation upon register theming</p> 
     <p>> Dynamic nav bar</p> 
     <p>> Contact me form active</p> 
     <p>> Make logout.php a json response</p> 
     <p>> Error checking both server side and client side registration</p> 
     <p>> Log in using email OR username</p> 
     <p>> login box display more detials</p> 
     <p>> Password reset</p> 
     <p>> include files to memory save</p> 
     <p>> inline noty's on login/register.</p> 
     <p>> clean code</p> 
     <p>> admin side</p> 
     <p>> library for logcheck/admin check</p> 
    </div> 
    <div class="login-bottom"> 
    </div> 
    </div> 
    </div> 
<div id="footer"> 
    <div id="footer-content"> 
<p>&copy; Copyright 
2013 
Pachonk</p> 
    </div> 
</div> 
</body> 
</html>

Тогда я пытаюсь сделайте div-центром, перейдя:

#content-center { 
margin-left: auto ; 
margin-right: auto ; 
width: 322px; 
margin-top: 20px; 
}

Но это беспорядок вверх над ним.

источник

2013-02-18 Anonymous

demo: http://alex.piechowski.org/school/admin/index.htm – 2013-02-18 23:57:09

добавить это:

#content_center { 
    margin-left: auto ; 
    margin-right: auto ; 
    width: 322px; 
    margin-top: 20px; 
    clear: both; 
}

нет плавающих элементов допускаются на левой или с правой стороны (из-за clear: both).

источник

2013-02-18 23:58:17 Michal

Работает безупречно. Не могли бы вы внести изменения в то, почему они работают, поэтому я могу присудить вам ваш «принятый ответ»? – 2013-02-19 00:02:03

это работает, потому что атрибут clear делает: никаких плавающих элементов не разрешено ни на левой, ни в правой стороне – Michal

Спасибо, хочу изменить и сказать, что хотя? и я соглашусь через 7 минут, когда это позволит мне. – 2013-02-19 00:04:20

Вам нужно удалить:

margin-top: 20px;

от # контент-центра, который толкает все в том, что Див вниз.

Edit: ответ выше говорю вам, чтобы добавить

clear:both;

Это также работает, я предполагаю, что я неправильно ваш вопрос и почему вам нужна маржа-топ в первую очередь. Все еще при полной потере того, зачем вам нужна маржа, в первую очередь, ее действительно подшучивают, если кто-то не возражает объяснить? :)

источник

2013-02-18 23:59:58 DuncanLewis

Почему поплавок испортил вещи выше div?

ответ

Смежные вопросы