How do you overlap divs?

  • Hi All,

    I want to create an overlapped effect for my footer so that the content of another div sits on top of it. My code and css so far are as follows:

    <!-- Begin Twitter Feed -->
	<div id="twitter">
		<div class="wrap">
		</div>
	</div>
<!-- End Twitter Feed -->

<!-- Begin Footer -->
	<div id="footer">
		<div class="wrap">
		</div>
	</div>
<!-- End Footer -->
    * {
	margin: 0px;
	padding: 0px;
}

div {
	display: block;
}

body {
	font-size: 81.3%;
	font-family: Arial, Helvetica, sans-serif;
	color: #333;
	line-height: 1.2em;
	background: #f5f5f5;
}

#twitter {
	width: 100%;
	height: 100px;
}

#twitter .wrap {
	background: red;
}

#footer {
	width: 100%;
	height: 400px;
	background: #708090;
}

.wrap {
	margin: 0px auto;
	width: 960px;
	height: 100%;
}

    What I want to do is to visually get the red #twitter .wrap div to overlap the #footer div by 20px so that if I assign a twitter bird icon to that .wrap it appears to be stood half in #footer and half in #twitter.

    Any help is greatly appreciated.

Viewing 6 replies - 1 through 6 (of 6 total)

  • No link, so I have to fly blind, but I’ll give you general ideas.

    First is trying negative margins on one DIV or the other. This will cause overlap. You’ll need to experiment.

    Something like this may head you in the right direction:

    #twitter .wrap {
	background: red;
  margin-bottom: -20px;
}

    With no precise figures for .wrap’s dimensions, it could be a little funky. But this should get you started. You could also try the neg. margin on #twitter (the part without .wrap).

    The other is using absolute positioning. Plenty of good tuts on that.

    Good luck, D

    Thread Starter codeandcolour

    (@codeandcolour)

    Thanks for your advice but I am still unable to get the desired result, by using negative margins I only seem to be able to pull the #footer up over .wrap which visually makes .wrap look smaller in height than it should be.

    I have uploaded the above code here

    along with a jpg image here showing what I want to achieve.

    https://www.w3schools.com/Css/css_positioning.asp

    Thread Starter codeandcolour

    (@codeandcolour)

    alchymyth: Thanks for the link but still having read all that I just can’t get my head round the theory of how it would work.

    If someone could possibly demonstrate a solution and quickly talk through how that css achieves the desired effect I would then hopefully be able to understand it enough to implement in more than just this one situation.

    Thread Starter codeandcolour

    (@codeandcolour)

    Can anyone else offer up a suggestion, as I am still looking for a solution.

    Thanks

    Thread Starter codeandcolour

    (@codeandcolour)

    Ok so it’s taken a lot of figuring out but here is the solution I created, thanks again to alchymyth and flamenco for their replies.

    (Note: This only worked for me as #twitter does not have a background image or colour. If those values are set then the effect gets hidden.)

    * {
	margin: 0px;
	padding: 0px;
}

div {
	display: block;
}

body {
	font-size: 81.3%;
	font-family: Arial, Helvetica, sans-serif;
	color: #333;
	line-height: 1.2em;
	background: #f5f5f5;
}

#twitter {
	width: 100%;
	height: 100px;
	position: relative;
	z-index: 2;
}

#twitter .wrap {
	background: red;
	margin-top: 35px;
}

#footer {
	width: 100%;
	height: 400px;
	background: #708090;
	position: relative;
	z-index: 1;
	margin-top: -30px;
}

.wrap {
	margin: 0px auto;
	width: 960px;
	height: 100%;
}
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How do you overlap divs?’ is closed to new replies.