CODEWITHSUNDEEP
htmlcss
Ellis
Ellis

Reputation: 121

Absolute positioning and overlapping divs

after i include the position:absolute in one of my divs, i am noticed that (the div) is being overlap by another div.

screencaps

here's my fiddle,

the div that I'm talking about is the #nav-holder being overlapped by my footer or the black part of the fiddle.

i also used media query in my css.

#nav-holder { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 200px;
}

http://jsfiddle.net/mjanthrax/pb206Lnz/

Upvotes: 0

Views: 88

Answers (3)

Ram kumar
Ram kumar

Reputation: 3162

Please update css 

*{box-sizing: border-box}

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, 
img, form, fieldset, blockquote {
    margin:0 auto;
	padding:0;
}

header, footer, div{
	position: relative; 
	display: block;
}

body {
	background: #222222;
	font: 63% "Century Gothic", Tahoma, Helvetica;
}

#content {
	overflow: hidden;
	background: #eeeeee;
}

#post-wrapper{
	margin: 20px 40px 20px 40px;
	position: relative;
}

#posts {
	background: #fff;
	margin-bottom: 10px;
	padding: 10px;
	overflow: hidden;
}

#nav #list-group a#active {
	background-color: #00aadc;
	border-left-color: #00678b;
	color: #FFF;
}
#nav{
	margin: 0;
	overflow: hidden;
}

#nav #list-group {
	padding: 0;
}

#list-group{
	position: relative;
	display: block;
	padding: 10px 15px;
	margin-bottom: -1px;
	background-color: #fff;
	border: 1px solid #ddd;
}

#nav #list-group a {
	padding: 15px 10px;
	display: block;
	color: #333;
	border-left: solid 5px #FFF;
	text-decoration: none;
	font-size: 1.5em;
}

#nav #list-group a:hover {
      background-color: #e1e1e1;
      border-left-color: #e1e1e1; 
}

#posts h2 {
	font-size: 2.5em; 
	word-wrap: break-word; 
}

#posts h3, #posts h4, h5, h6 {
	padding: 4px 5px;
}

#posts h2, h3, h4, h5, h6 {
	color: #3c3f40;
}

h2#titlename{
	color: #327800;
}

#posts h3 {
	font-size: 1.8em;
}
 
#posts p {
	line-height: 1.3em; 
	font-size: 1.4em; 
}

#posts small {
	font-size: 1.2em;
	padding: 0px 5px;
}
 
#posts a {
	font-size: 1em;
	color: #327800; 
	font-weight: bold; 
	text-decoration: none; 
}
 
#posts blockquote {
	margin: 10px 20px; 
	border-left: 3px solid #cccccc; 
	padding-left: 10px; 
}
hr {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
}

/* MEDIA QUERIES */
@media screen and (min-width: 900px ) {

	#posts{
		margin-right: 220px;
	}
	
	#nav-holder { 
	    position: absolute; 
	    top: 0; 
	    right: 0; 
	    width: 200px;
  	}
    #post-wrapper{min-height:200px;}

}
<div id="content" class="container">
 		
	 	<div id="post-wrapper" >
				<div id="posts">
			<h2>test</h2>
				<small>Posted at 2015-02-28 18:35:04 by <a href="#">jarn</a></small>
				<blockquote><p><h2>test</h2></p></blockquote>
				<p id="linked"><a href="news-admin.php?postid=1">Read More</a></p>
							</div>

				
			<div id="nav-holder">
		 		<ul id="nav">
					<li id="list-group"><a href="client-information.php">Member Information</a></li>
					<li id="list-group"><a href="#" id="active">Home</a></li>
					<li id="list-group"><a href="client-loan-status.php">Loan Status</a></li>
					<li id="list-group"><a href="client-loan-history.php">Loan History</a></li>
				</ul>
	 		</div>

		</div><!--end of mainposts-->

	</div><!-- end content -->

Or you can choose another way

Upvotes: 1

Nooh
Nooh

Reputation: 1546

try this

*{box-sizing: border-box}


body,h1,h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, 
img, form, fieldset, blockquote {
   
    padding:0;
}
div{
    margin:0;
    
}
header, footer, div{
	position: relative; 
	display: block;
}

body {
    margin:0;
	background: #222222;
	font: 63% "Century Gothic", Tahoma, Helvetica;
}

#content {
	overflow: hidden;
	background: #eeeeee;
}

#post-wrapper{
	margin: 20px 40px 20px 40px;
	position: relative;

}

#posts {
	background: #fff;
	margin-bottom: 10px;
	padding: 10px;
	overflow: hidden;
}

#nav #list-group a#active {
	background-color: #00aadc;
	border-left-color: #00678b;
	color: #FFF;
}
#nav{
	margin: 0;
	overflow: hidden;
}

#nav #list-group {
	padding: 0;
}

#list-group{
	position: relative;
	display: block;
	padding: 10px 15px;
	margin-bottom: -1px;
	background-color: #fff;
	border: 1px solid #ddd;
}

#nav #list-group a {
	padding: 15px 10px;
	display: block;
	color: #333;
	border-left: solid 5px #FFF;
	text-decoration: none;
	font-size: 1.5em;
}

#nav #list-group a:hover {
      background-color: #e1e1e1;
      border-left-color: #e1e1e1; 
}

#posts h2 {
	font-size: 2.5em; 
	word-wrap: break-word; 
}

#posts h3, #posts h4, h5, h6 {
	padding: 4px 5px;
}

#posts h2, h3, h4, h5, h6 {
	color: #3c3f40;
}

h2#titlename{
	color: #327800;
}

#posts h3 {
	font-size: 1.8em;
}
 
#posts p {
	line-height: 1.3em; 
	font-size: 1.4em; 
}

#posts small {
	font-size: 1.2em;
	padding: 0px 5px;
}
 
#posts a {
	font-size: 1em;
	color: #327800; 
	font-weight: bold; 
	text-decoration: none; 
}
 
#posts blockquote {
	margin: 10px 20px; 
	border-left: 3px solid #cccccc; 
	padding-left: 10px; 
}
hr {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
}

/* MEDIA QUERIES */
@media screen and (min-width: 900px ) {

	#posts{
		margin-right: 220px;
	}
	
	#nav-holder { 
        position: absolute; 
	    top: 0; 
        right: 0; 
       margin:16px;
  	}

}
<div id="content" class="container">
 		
	 	<div id="post-wrapper" >
				<div id="posts">
			<h2>test</h2>
				<small>Posted at 2015-02-28 18:35:04 by <a href="#">jarn</a></small>
				<blockquote><p><h2>test</h2></p></blockquote>
				<p id="linked"><a href="news-admin.php?postid=1">Read More</a></p>
							</div>

				
			<div id="nav-holder">
		 		<ul id="nav">
					<li id="list-group"><a href="client-information.php">Member Information</a></li>
					<li id="list-group"><a href="#" id="active">Home</a></li>
					<li id="list-group"><a href="client-loan-status.php">Loan Status</a></li>
					<li id="list-group"><a href="client-loan-history.php">Loan History</a></li>
				</ul>
	 		</div>

		</div><!--end of mainposts-->

	</div><!-- end content -->

I splited 

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, 
img, form, fieldset, blockquote {
margin:0 auto;
padding:0;
}

in to 

body,h1,h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, 
img, form, fieldset, blockquote {

    padding:0;
}
div{
    margin:0;

}

Upvotes: 0

priya786
priya786

Reputation: 1834

i hope this may help you Try this demo

i just remove the margin 0 auto from the some tags

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, 
img, form, fieldset, blockquote {
margin:0 auto;
padding:0;
}

or

try second demo

Upvotes: 0

Related Questions