CODEWITHSUNDEEP
htmlcss
buttonSmasher96
buttonSmasher96

Reputation: 133

Why is my nested div pushing down my content?

So I'm trying to put my div,"title", inside my "header" div. The problem is I try to center it between my image and my "social" header but it just overlaps and pushes the divs down. How can I center it between those two to have be able to put text so I can make a title?

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

Upvotes: 1

Views: 272

Answers (5)

Subendra Sharma
Subendra Sharma

Reputation: 121

Ok... when ur trying to keep sth in between sth try keeping the stuff in between the other two stuff... use display:inline-block to keep other elements on the same line... since u want the social image to be on the right side ... use display:inline-block with the #title and float: right with the social image

        #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;
        display:inline-block;

    }
    #header > img {
        float:left;
        margin: 15px 0px 0px 0px;
    }

    #title{ 
        width:50%;
        text-align:center;
        display:inline-block;
    }

    #social {
        float: right;
        margin: 20px 30px 0px 0px;
    }


<div id="header">
        <div id="title"><h2>Title centered in header</h2></div> 
        <a name="top"></a>
              <img src="your image" width="232" height="101" alt="Logo" title="python">

        <div id="social">
            <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>         
        </div> <!-- End of social -->
    </div>

Upvotes: 0

geeksal
geeksal

Reputation: 5016

It is the bad practice to place the hardcoded values where not required (such as margins which should vary as per the browser window size) instead use em, vw or % values where ever possible. Use HTML strictly for Structuring don't put height, width etc in the code. Always use CSS for such styling purpose.

Don't set header to 100px as said by @Roman its is really bad. Use position: relative; float:left; and display: inline-block; to achieve desired results for title, social and img inside header.

Here is the code:

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:auto;
    		border-bottom: 3px solid #000;
    		clear: right;
    	}
    	#header > img {
    		margin: 1em 0 0 0;
            width: 232px;
            height: 101px;
            position: relative;
            float:left;
    	}
    	#social {
    	  position: relative;
    		float: right;
            display:inline-block;
    		margin: 1em 1.2em 0 0;
    	}
     
    	#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;
           float:left;
           margin: 1.1em 0 0 7em;
    	}
 <div id="wrapper">
    	<div id="header">
        <img src="https://janikvonrotz.ch/wp-content/uploads/2015/10/Python-Logo.png"  alt="Logo" title="python">
    		<div id="title"><h2>Title centered in header</h2></div>
    		<a name="top"></a>
    				
    		<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 -->

Upvotes: 0

CodeWeis
CodeWeis

Reputation: 856

so what did i do i changed the position of the logo i put it before your title and then i centered it with flexbox

  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;
        display:flex;
  flex-direction:row;
  justify-content:space-between;
    }
    #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
       
    }
<body>

<div id="wrapper">
    <div id="header">
    
     <img src="https://janikvonrotz.ch/wp-content/uploads/2015/10/Python-Logo.png" width="232" height="101" alt="Logo" title="python">
        <div id="title">
        <h2>Title centered in header</h2></div>
        <a name="top"></a>
        <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:?sub

Upvotes: 0

Donny West
Donny West

Reputation: 720

Try adding "float: right" to the title element's style. You might also want to look in to flexbox, which makes alignments like this pretty trivial, and is simpler to get your head around than floats. Here's a great resource to get you started.

Upvotes: 0

Roman
Roman

Reputation: 3941

You made a simple mistake you hardcoded the height of your header to 100px;

Just set this to auto.

Check Fiddle

Upvotes: 2

Related Questions