[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 213
  • Last Modified:

Why does this div not display correctly?

Head out to http://www.brucegust.com/drummerboy

I want the youtube video that's belligerently lurking at the bottom of the screen to be positioned where the youtube graphic is.

I've got the graphic positioned "relative" and the youtube div is "absolute," but I can't get the two to cooperate.

What am I doing wrong?

Here's my stylesheet:

body {
	font-family: Helvetica, Microsoft Sans Serif;
	font-size: 14px;
	color: #000000;
	vertical-align: top;
	height: 100%;
	width: 100%;
	margin-top:25px;
	background-color:#ffffff;
}


#graphic {
position:relative;
height:934px;
width:1085px;
text-align:center;
margin:auto;
}

#youtube {
position:absolute;
height:319px;
width:460px;
margin-left:579px;
margin-top:176px;
z-index:2;
}



		










		

Open in new window

0
brucegust
Asked:
brucegust
  • 2
1 Solution
 
Chris StanyonCommented:
You're positioning your #youtube DIV absolutely so you need to tell it where to sit. Because you already have margins in place, just add top: 0; to the rule and it'll be fine:

#youtube {
    height: 319px;
    margin-left: 579px;
    margin-top: 176px;
    position: absolute;
    top: 0;
    width: 460px;
    z-index: 2;
}

Open in new window

0
 
Chris StanyonCommented:
A better solution may be to remove the margins altogether and just position the DIV

#youtube {
    height: 319px;
    left: 579px;
    top: 176px;
    position: absolute;
    width: 460px;
    z-index: 2;
}

Open in new window

0
 
brucegustAuthor Commented:
That'll do it!
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now