Here's an interesting issue I'm facing - my layout works fine in Internet Explorer but not in Chrome! In Chrome, I'm seeing some extra vertical spaces between divs which is not the intended behavior. The divs are supposed to sit flush against each other.
I had originally set a min-height attribute that caused some width errors, so I removed it. However, I'm still unsure about what is causing this spacing problem.
Any suggestions or help would be greatly appreciated! Thank you 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>