asked on

CSS: making a div float OVER another div

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!

John

#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" -->

Open in new window

SOLUTION

grendel777

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Jason C. Levine

>> Have the button change it to visibility: visible

So this needs javascript...(in case that was your next question, John)

SOLUTION

scrathcyboy

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

John Carney

ASKER

This al looks very promising. I figured it would be a visibilty on/off thing like in VBA. My first question would be: how do I position a div to float free over other divs without messing them up.

Can't wait to start trying out your suggestions and any more you might have over the weekend.

Thanks!

John

scrathcyboy

"how do I position a div to float free over other divs without messing them up."

as I said, use absolute positioning in the DIV and it will position more or less to that place, depending on the browser you are using. Else put the DIV where you want it, if you want a full row to show, or use <SPAN> if you just want a short part of the row to show, and toggle its visibiliity on or off.

John Carney

ASKER

grendel777, thanks for the link. I couldn't make sense of it, but it prompted me to google some phrases which eventually led me to a site where I found code samples that with a little tinkering produced exactly the result I was looking for. Even though it's a very beginner-friendly site, I think you might find some useful or interesting things on it: http://bonrouge.com

Jason, thanks for pointing out the fact that I needed javascript (of which I now actually have a minimal understanding!)

And scratchyboy, thanks for pointing out the need for absolute positioning.

The big problem I'm having now is incorporating it into my existing code. Please take a look at "test2.html," and let me know what I'm doing wrong in "CowBoom_Toggle.html." They both have links to their respective .css an .js docs, if the problem is in one of those.

http://www.discretedata.com/Ex-Ex/test2.html
http://www.discretedata.com/Ex-Ex/CowBoom_Toggle.html

Thanks!

John

SOLUTION

Jason C. Levine

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

John Carney

ASKER

Jason, could you give me the link to that page on his site? I'm not having any luck finding it.
Thanks, John

Jason C. Levine

http://bonrouge.com/~togglit

Read all the way down the page to see how the script gets progressively more complex.

John Carney

ASKER

Excellent suggestion. I probably won't have time again til Monday to work on it. I actually tried using all the code before, but I probably copied and pasted something wrong. Hopefully, when i'm more careful and deliberate, and know a little more about how it works, all the code on that page will be enough to handle what's going on in my page.

Oh and thanks for getting me started with javascript.

John

ASKER CERTIFIED SOLUTION

Jason C. Levine

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial