CODEWITHSUNDEEP
javascriptjquerycsshtml
Mihai Bujanca
Mihai Bujanca

Reputation: 4209

Div moving down

I am trying to animate a so that when the iframe source changes it is hidden and then shown again. The problem is that when the show is triggered, my div moves down. I really have no idea what should I do, I am pretty sure the css is the problem. My code is here: http://jsfiddle.net/RPxFs/

Click on the black part to change the source, you will see 'page not found' in the iframe but anyway you'll see what the problem is.

Thanks in advance

Upvotes: 0

Views: 391

Answers (4)

wm.p1us
wm.p1us

Reputation: 2059

http://jsfiddle.net/RPxFs/19/ look here, I've just added 

 position: absolute;

for navigation and it works perfect

Upvotes: 1

Subhan Ahmed
Subhan Ahmed

Reputation: 49

For solution to this remove this attribute float: left; from below iframe container.

#frame_div {
    border-right: 1px solid #999999;
    display: none;
    float: left;
    height: 90%;
    overflow: hidden;
    width: 80%;
}

if you need to add float attribute in that case you need to provide total with of what area left container + iframe container covers in order to appear them side by side.

Here is jsfiddle link http://jsfiddle.net/RPxFs/20/

Upvotes: 1

Phil Cook
Phil Cook

Reputation: 2065

If you give the containing div a fixed width that will be enough to hold both the navigation and the iframe then they should sit side by side.

I have chosen width: 800px;

See my fiddle for how I laid it out.

http://jsfiddle.net/RPxFs/

Upvotes: 1

Vond Ritz
Vond Ritz

Reputation: 2012

i think it goes down because the width is overlapping.

div navigation and div frame_div

try to decrease the width percentage of frame_div to 79% and remove div frame_div styles.

http://jsfiddle.net/vonDy2791/RPxFs/7/

<div src="save.php" id="frame_div" >
#frame_div{
    float: left;
    height: 90%;
    width: 79%;
    border-right: 1px solid #999;
    display: none;
    overflow: hidden
  }

Upvotes: 3

Related Questions