Здесь обратный один.. IE Работающий в то время как хром не делает! Я получаю странные дополнительные вертикальные промежутки между divs в chrome. IE divs сидят друг против друга, как предполагалось.
Первоначально у меня был атрибут min-height, который вызвал некоторые ошибки с шириной, но взял это. Все еще не совсем уверен, что вызывает проблему с интервалом.
Любая помощь приветствуется! Спасибо всем, -BR
CSS
#container {
width: 100%;
}
#headerout {
width: 100%;
height: 100px;
background: #1240AB;
}
#header {
width: 1000px;
margin: auto;
}
.splitout {
width: 100%;
height: 225px;
}
.split {
width: 1000px;
margin: auto;
}
.content {
width: 750px;
margin: auto;
}
.white {background-color: #DDE3F0;}
.lightblue {background-color: #C9D5F0;}
#footerout {
width: 100%;
height: 30px;
background: #1240AB;
}
#footer {
width: 1000px;
margin-left: 25px;
}
наценка
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset='utf-8'>
</head>
<body>
<div id="container">
<header>
<div id="headerout">
<div id="header">
<p>Content<p>
</div>
</div>
</header>
<div class="splitout white">
<div class="split">
<div class="content">
<p>content</p>
</div>
</div>
</div>
<div class="splitout lightblue">
<div class="split">
<div class="content">
<p>content</p>
</div>
</div>
</div>
<div class="splitout white">
<div class="split">
<div class="content">
<p>content</p>
</div>
</div>
</div>
</div>
<div id="footerout">
<div id="footer">
<p>foot</p>
</div>
</div>
</body>
</html>
Не используйте css-reset.
Предпочитают normalize.css: http://necolas.github.io/normalize.css/
"причины": qaru.site/questions/15188/...
эта помощь с "ошибками".
Вы должны использовать css-reset для полей абзаца (они вызывают это)
Простой пример сброса
* {
margin: 0;
padding: 0;
}
Chrome добавляет поля для абзацев по умолчанию.