Advertisement

02.01.2008 at 01:13PM PST, ID: 23130858
[x]
Attachment Details

CSS: making a div float OVER another div

Asked by gabrielPennyback in Cascading Style Sheets (CSS), Hypertext Markup Language (HTML), Macromedia Dreamweaver

I have a webpage with a div named "#Block1", containing two divs named "#topLeft" and "#topRight."  

Is it possible to put a button in #topLeft that brings up a div named "#descriptionLong" (height and width of 280px), and floats it centered over #Block1?

If so, how?

Thanks!

JohnStart Free Trial 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:

#Block1{
	height: 320px;
	width: 890px;
	float: left;
  }
#topLeft {
	width: 50%;
	height: 300px;
	font-family: "Arial Black";
	font-size: 24px;
        margin-top: 30px
	line-height: normal;
	color: #000000;
	font-weight: normal;
	float: left;
	padding-top: 20px;
	background-color: #FFFFFF;
  }
#topRight{
	width: 50%;
	height: 300px;
	float: left;
	color: #FFFFFF;
	font-family: "Gill Sans MT";
	line-height: normal;
	font-size: 12px;
	text-align: center;
	margin-top: 42;
	margin-left: auto;
	background-color: #000000;
	padding-top: 20px;
	background-image: url(iPodDock.jpg);
	background-repeat: no-repeat;
	background-position: center center;
  }
  #descriptionLong {
	font-family: "Gill Sans MT";
	font-size: 14px;
	float: left;
	width: 280px;
	height: 280px;
	color: #000000;
	padding-left: 10px;	
	background-color:#FFFFFF
  }
 
HTML CODE:
		<div id="Block1">	
            <div id="topLeft">
                <div id="product">text here		</div>
                <div id="price">$119.99		</div>      
                <div id="shipping">+$5 shipping		</div>
                <div id="holder1">	
                    <div id="conditions">Condition:<br />Product(s):		</div>
                    <div id="descriptionShort">New<br />text here</div>
                </div>	<!-- end holder1 -->  
            </div>	<!-- end topLeft -->      
            <div id="topRight"></div>	<!-- end topRight -->
		</div>	<!-- end "mainBlock" -->
[+][-]02.01.2008 at 02:07PM PST, ID: 20801215

Assisted solutions are selected by the member who asked the question as a comment that contributed to their question's solution.

Start your 7-day free trial to view this Assisted Solution or ask the Experts your question.

 
[+][-]02.01.2008 at 02:34PM PST, ID: 20801374

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]02.01.2008 at 04:13PM PST, ID: 20802121

Assisted solutions are selected by the member who asked the question as a comment that contributed to their question's solution.

Start your 7-day free trial to view this Assisted Solution or ask the Experts your question.

 
[+][-]02.01.2008 at 08:01PM PST, ID: 20802985

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]02.01.2008 at 08:20PM PST, ID: 20803054

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]02.02.2008 at 11:59AM PST, ID: 20805648

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]02.02.2008 at 12:41PM PST, ID: 20805841

Assisted solutions are selected by the member who asked the question as a comment that contributed to their question's solution.

Start your 7-day free trial to view this Assisted Solution or ask the Experts your question.

 
[+][-]02.02.2008 at 01:36PM PST, ID: 20806024

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]02.02.2008 at 01:44PM PST, ID: 20806053

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]02.02.2008 at 02:01PM PST, ID: 20806135

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]02.02.2008 at 03:09PM PST, ID: 20806390

View this solution now by starting your 7-day free trial. Setting up your free trial is quick, easy, and secure. We will return you to this solution, unlocked, when you're done.

 

About this solution

Zones: Cascading Style Sheets (CSS), Hypertext Markup Language (HTML), Macromedia Dreamweaver
Sign Up Now!
Solution Provided By: jason1178
Participating Experts: 3
Solution Grade: A
 
 
 
Loading Advertisement...
20080716-EE-VQP-32 / EE_QW_2_20070628