Solved

how can you stop relative - absolute div collapse

Posted on 2013-01-10
6
857 Views
Last Modified: 2013-01-15
How can I stop the div #banner_ad_wrapper from collapsing.  The reason I am using position absolute on .banner_ad is I want to stack them on top of each other.  Should I be doing this a different way.  Thanks

#banner_ad_wrapper {
	position:relative;
	margin-top:20px;
}
.banner_ad {
	width:920px;
	margin-left:20px;
	position:absolute;
	top:0;
}

<div id="banner_ad_wrapper">
<div  class="banner_ad">
  <img src="images/010713_JewelryHandbagWalletSale_site.jpg" width="920" />
</div>
<div class="banner_ad">
  <img src="images/011013_save10whenyouspend100v4.jpg" width="920"/>
  </div>
</div>

Open in new window

0
Comment
Question by:Luey
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
6 Comments
 
LVL 12

Expert Comment

by:jessegivy
ID: 38764224
Try this:

#banner_ad_wrapper {
      position:relative;
      margin-top:20px;
        overflow:visible;
}
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38764475
If that help... lucky.  If not a link to the page or the code would give us enough information to provide a full solution.  As it stands you have no z-index; so how do you intend to manage the stacking order?

Cd&
0
 

Author Comment

by:Luey
ID: 38764859
The stacking order is not relevant I will be using javascript to toggle show and hide the divs with the class banner_ads.  I just want to know how to put one div on top of another.  If you use a parent div positioned relative and a sibling div positioned absolute then the parent collapses.  So how can you stack divs on top of each other but keep the rest of you content to flow in a normal fashion.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:Luey
ID: 38764866
overflow:visible;  did not work.
0
 

Accepted Solution

by:
Luey earned 0 total points
ID: 38765010
I have found that when you position something absolute it will always take it out of the normal flow of content therefore it will always collapse the parent if a height is not set for the parent.  So I have set a height for my parent div and solved the problem.

#banner_ad_wrapper {
	position:relative;
	margin-top:20px;
	height:300px;	
}

Open in new window

0
 

Author Closing Comment

by:Luey
ID: 38777591
I did not get an answer that solved the problem.  However from other resources i found the answer.
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question