html - 为什么我的嵌套 div 会下推我的内容？

Question

所以我试图将我的 div，“title”，放在我的“header”div 中。问题是我试图将它放在我的图像和我的“社交”标题之间，但它只是重叠并将 div 向下推。我如何才能将它置于这两者之间，以便能够放置文本以便制作标题？

  	body {
    		background : #b3d9ff;
    		margin : 0;
    		padding: 0;
    		font-family : Futura;
    	}
    	#wrapper {
    		width: 960px;
    		height: auto;
    		background: #cce5ff;
    		border-left: 5px solid #737373;
    		border-right: 5px solid #737373;
    		overflow : auto;
    		margin : 0 auto;
    		padding: 10px;
    	}
    	#header {
    		width:100%;
    		height:100px;
    		border-bottom: 3px solid #000;
    		clear: right;
    	}
    	#header > img {
    		margin: 15px 0px 0px 0px;
    	}
    	#social {
    		float: right;
    		margin: 20px 30px 0px 0px;
    	}
    	#social ul li {
    		float: left;
    		list-style: none;
    		padding-right: 5px;
    	}
    	#sidebar {
    		float: left;
    		width: 275px;
    		height: 100%;
    	}
    	#menu {
    		float: left;
    		height: auto;
    		width: 200px;
    	}
    	#menu ul li {
    		list-style : none;
    		padding: 0px;
    		text-align: center;
    	}
    	#menu ul li a {
    		color: #666666;
    		text-decoration: none;
    		display: block;
    	}
    	#menu ul li a:visited{
    		color:purple;
    	}
    	#menu ul li a:hover {
    		color:black;
    	}
    	#content {
    		float: left;
    		width: 655px;
    		height: 100%;
    		padding-left: 15px;
    		letter-spacing : 1;
    		border-left: 3px solid black;
    	}
    	h1 {
    		text-align: center;
    		padding : 5px;
    		border-bottom: 1px solid black;
    	}
    	p {
    		text-indent: 50px;
    		line-height: 25px;
    	}
    	.top a {
    		color : #666666;
    		text-decoration: none;
    	}
    	#readMore {
    		text-align: right;
    	}
    	#readMore a:visited {
    		color:purple;
    	}
    	#footer {
    		clear: both;
    		width: 100%;
    		height: 80px;
    		color: black;
    		border-top: 3px solid black;
    	}
    	h5 {
    		text-align: center;
    		color: #666666;
    	}
    	#title {
    		position relative
    	}

   <div id="wrapper">
    	<div id="header">
    		<div id="title"><h2>Title centered in header</h2></div>
    		<a name="top"></a>
    				<img src="https://janikvonrotz.ch/wp-content/uploads/2015/10/Python-Logo.png" width="232" height="101" alt="Logo" title="python">
    		<div id="social">
    			<ul>
    				<li><a href="https://github.com/GallardoBrayan" target="_blank"><img src="http://icons.iconarchive.com/icons/limav/flat-gradient-social/512/Github-icon.png" width="55" height="55"alt="github" title="github"></a></li>
    			</ul>
    		</div> <!-- End of social -->
    	</div> <!-- End of header -->
    	<div id="sidebar">
    		<div id="menu">
    			<ul>
    				<li><h4><a href="index.html">Home</a></h4></li>
    				<li><h4><a href="overview">Overview</a></h4></li>
    			</ul>
    		</div> <!-- End of menu -->
    	</div> <!-- End of sidebar -->
    	<div id="content">
    
    <a name="overview"><h1>Overview</h1>
    <pre style="word-wrap: break-word; white-space: pre-wrap;">
    Sample
    </pre>
    <div class="top"><h4><a href="#top">Back To Top</a></h4></div>
    
    
    	</div> <!-- End of content -->
    	<div id="footer">
    		<h5>2016 &copy Brayan Rafael Gallardo </br><a href="mailto:?subject=Sample">Contact me</a></h5>
    	</div>
    </div> <!-- End of wrapper -->
    
 

Answer 1

您犯了一个简单的错误，您将 header 的高度硬编码为 100px;

只需将其设置为自动即可。

检查 Fiddle