Vertical Space Between Divs in Chrome not IE

Question

Here's a backwards one.. IE Working while chrome does not! I'm getting strange extra vertical spaces between divs in chrome. IE the divs sit flush against each other as intended.

I originally had a min-height attribute which caused some errors with width, but took that out. Still not entirely sure what's causing the spacing issue.

Any help is appreciated! Thanks all, -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;
}

Markup

<!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>

Try [normalize.css](http://necolas.github.io/normalize.css/) — Protomen, Apr 19 '14 at 20:34

score 2 · Accepted Answer · edited May 23 '17 at 10:26

2

Don't use css-reset.

Prefer normalize.css: http://necolas.github.io/normalize.css/

"reasons": https://stackoverflow.com/a/8357635/1518921

this help with "bugs".

edited May 23 '17 at 10:26

Community

1
1

answered Apr 19 '14 at 20:39

Protomen

9,471
9
57
124

Thanks! Needed a combo of the two answers but this helped with the horizontal issues. – BR89 Apr 19 '14 at 21:02

score 1 · Answer 2 · answered Apr 19 '14 at 20:35

1

You need to use css-reset for paragraph's margins (they causing this)

http://jsfiddle.net/eUVm8/

Simple example of reset

* {
  margin: 0;
  padding: 0;
}

Chrome add's margins for paragraphs by default.

answered Apr 19 '14 at 20:35

Nikolay Talanov

706
4
15

Used a combo of both. Thanks! – BR89 Apr 19 '14 at 21:04

Vertical Space Between Divs in Chrome not IE

2 Answers2