CSS drop down div

Question

I have a div box and a link on my page. I have written simple javascript that hides the div box at the beginning, then after clicking the link, the box appears again.

The problem is, when the div appears, it pushes down contents bellow it. I would like it to just appear "above" them. Like a drop down menu but this is just a single div tag.

Here is my markup:

  <div class="slide-heading">
<div class="slide-laws">
 <a href="#" class="toggle-slide-laws accessible-link"><img src="/images/paragraph.jpg" alt="paragraph"></a>
                <!-- THE LINK TOGGLES THE DIV BELLOW -->
 <div>
  <a href="/clientarea/utils/law/id/2832" rel="external-new-window" style="color: #ba8800;"><strong>124/2006 - O bezpečnosti a ochrane zdravia pri práci a o zmene a doplnení niektorých zákonov</strong></a><br />
  <a href="/clientarea/utils/law/id/2832/p/2/a/1" rel="external-new-window">§2, odsek 1</a><br />
  <a href="/clientarea/utils/law/id/2832/p/2/a/2" rel="external-new-window">§2, odsek 2</a><br />

  <a href="/clientarea/utils/law/id/2832/p/5/a/2" rel="external-new-window">§5, odsek 2</a><br />
 </div>
</div>
<h3>Kapitola 1</h3>
<p>Slide A</p>
<div class="clear">&nbsp;</div>
  </div>
            <p>I DON'T WANT THIS PARAGRAPH TO BE PUSHED DOWN WHEN THE BOX APPEARS.</p>

This link toggles the div bellow it:

<a href="#" class="toggle-slide-laws accessible-link"><img src="/images/paragraph.jpg" alt="paragraph"></a>

When you click on the link, the box appears or disappears.

My current styles:

#content div.slide-laws {
 float: right;
 width: 30em;
 line-height: 1.3em;
 font-size: .9em;
}
#content div.slide-laws a.toggle-slide-laws {
 float: right;
}
#content div.slide-laws div {
 text-align: left;
 float: left;
 margin-bottom: 4px;
}

Robbert · Accepted Answer · 2010-07-14 09:30:10Z

4

@AvatarKava That would be styling the a element. I reckon

#content div.slide-laws div
{
    z-index: 9999;
    position: absolute;
    top: 0px;
    right: 0px;
}

will do the trick.

answered Jul 14, 2010 at 9:30

Robbert

3453 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AvatarKava Over a year ago

oops, missed that last reference on the end :D upvoting yours and editing mine

Robbert · Accepted Answer · 2010-07-14 09:23:54Z

3

I'd say the appearing DIV needs an absolute or relative position and a high z-index

answered Jul 14, 2010 at 9:23

Robbert

3453 silver badges15 bronze badges

Comments

Richard Knop · Accepted Answer · 2010-07-14 10:14:07Z

2

OK I solved this by myself. These styles work (tested in FF and IE):

#content div.slide-laws {
    float: right;
    width: 30em;
    line-height: 1.3em;
    font-size: .9em;
}
#content div.slide-laws a.toggle-slide-laws {
    float: right;
}
#content div.slide-laws div {
    text-align: left;
    float: left;
    z-index: 99999;
    position: absolute;
    top: 4em;
    right: 0;
    background: #eee;
    border: 1px solid #ccc;
    padding: 1em;
}

answered Jul 14, 2010 at 10:14

Richard Knop

84.2k155 gold badges402 silver badges564 bronze badges

1 Comment

Robbert Over a year ago

one minor thing: you don't need to float an element that's positioned absolute.

Community · Accepted Answer · 2020-06-20 09:12:55Z

-1

content div.slide-laws {

float: right;
width: 30em;
line-height: 1.3em;
font-size: .9em;

}

content div.slide-laws a.toggle-slide-laws {

float: right;

}

content div.slide-laws div {

text-align: left;
float: left;
z-index: 99999;
position: absolute;
top: 4em;
right: 0;
background: #eee;
border: 1px solid #ccc;
padding: 1em;

}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 14, 2010 at 15:55

Prashant

152 bronze badges

2 Comments

awe Over a year ago

This is just a copy of the answer by Richard Knop.

Michael Giovanni Pumo Over a year ago

Stop stealing answers to gain reputation points. Everyone down-vote this guy.

Collectives™ on Stack Overflow

CSS drop down div

4 Answers 4

1 Comment

Comments

1 Comment

content div.slide-laws {

content div.slide-laws a.toggle-slide-laws {

content div.slide-laws div {

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

content div.slide-laws {

content div.slide-laws a.toggle-slide-laws {

content div.slide-laws div {

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related