Stuck on DIV inside a DIV

Dev Shed Forums Sponsor:

July 21st, 2004, 02:16 AM

fuzzybunny

C Neophyte.

Join Date: Feb 2004

Location: Melbourne Australia

Posts: 332

Time spent in forums: 2 Days 12 h 15 m 3 sec
Reputation Power: 14

Stuck on DIV inside a DIV

I'm setting up a website order form, and using CSS for formatting.

I want to be able to put a picture icon (to view a picture of the product) beside the products details. I'm having problems because the product details keep wrapping to a new line. Here are some images illustrating the predicament:

What it currently looks like

Picture 1

What I want it to look like

Picture 2

Structure of the DIV boxes

Picture 3

The code for the boxes is here:

Code:

<A href="http://localhost/21072004/picture.php?id=t35064">
<SPAN class=kitTitle>t35064. Kampfpanzer Leopard </SPAN></A>

<DIV style="position: relative; WIDTH: 500px; HEIGHT: 100px">
	<IMG src="hobbyhq - tamiya_com_au - Browse_files/camera.jpeg" style=\"position: absolute; margin: 0px 0px 0px 0px;\">

	<DIV style="position: relative;LEFT: 45px; WIDTH: 400px; TOP: 0px; HEIGHT: 40px; BACKGROUND-COLOR: #f0f0f0">

	<TABLE class=dataFile border=0>
		<FORM name=module action=cart.php?action=confirm method=post>
 		<TBODY>
  		<TR class=listColor>
    		<TH>1:35</TH>
    		<TH class=listHighlight>AFV</TH>
    		<TH>AU$30.00</TH>
    		<TH align=right>QTY
				<INPUT type=textField size=3 value=1 name=qty> 
				<INPUT type=submit size=3 value="Add to Cart" name=submit> 
				<INPUT type=hidden size=3 value=t35064 name=id>
			</TH>
		</TR>
	</TBODY>
	</FORM>
	</TABLE>


	</DIV>

I also took the liberty of putting a sample capture page on my webspace (if anyone wishes to investigate further)

Sample Page

Page Stylesheet

I'm trying to use a "DIV within a DIV", but when I set the positioning to "absolute", the DIV warps to the top of the page!

I've been stumped for days on this, and it's delayed the page's launch.

If anyone can help me... it'd be very much appreciated.

July 21st, 2004, 03:54 AM

woody2k

Registered User

Join Date: Jun 2004

Posts: 8

Time spent in forums: < 1 sec
Reputation Power: 0

Try somthings like this..

PHP Code:


		
			
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Shop</title>

<style type="text/css">

p { padding:0; font-size: 12px;}



#hele {

margin:0; 

padding:5px; 

border-style:solid; 

border-width:1px; 

WIDTH: 500px; 

HEIGHT: 100px

}



#image {

margin-right:3px; 

float:left;

}



#hoved {

margin:0; 

float:left; 

BACKGROUND-COLOR: #f0f0f0; 

padding:5px; 

width:400px;

}



div.box {

margin-left:3px; 

padding:5px; 

float:left;

HEIGHT: 35px;

background-color: #BBBBFB;

}

</style>

</head>

<body>



<p>

<A href="http://localhost/21072004/picture.php?id=t35064">

t35064. Kampfpanzer Leopard</A></p>



<DIV id="hele">



<DIV id="image">

<IMG src="hobbyhq - tamiya_com_au - Browse_files/camera.jpeg" alt="image">

</div>



<DIV id="hoved">

<FORM name=module action="cart.php?action=confirm" method=post>

<div class="box"><p>1:35</p></div>

<div class="box"><p>AFV</p></div>

<div class="box"><p>AU$30.00</p></div>

<div class="box"><p>QTY

<INPUT size=3 value=1 name=qty> 

<INPUT type=submit size=3 value="Add to Cart" name=submit> 

<INPUT type=hidden size=3 value=t35064 name=id></p></div>

</FORM>

</div>

<div style="margin:0; clear:left;"></div>

</div>



</body>

</html>

Last edited by woody2k : July 22nd, 2004 at 02:00 PM. Reason: Update!

July 21st, 2004, 08:02 PM

fuzzybunny

C Neophyte.

Join Date: Feb 2004

Location: Melbourne Australia

Posts: 332

Time spent in forums: 2 Days 12 h 15 m 3 sec
Reputation Power: 14

It works great

Love the little border, much cleaner!

problem is... IE6 doesn't like it

Before anyone says "IE6 if for gimps", does anyone have a workaround?

IE6 DIV look

Opera DIV look

July 22nd, 2004, 11:02 AM

woody2k

Registered User

Join Date: Jun 2004

Posts: 8

Time spent in forums: < 1 sec
Reputation Power: 0

hmm.. it works in my iE..

i can take a look at it..

Image

July 22nd, 2004, 11:18 AM

woody2k

Registered User

Join Date: Jun 2004

Posts: 8

Time spent in forums: < 1 sec
Reputation Power: 0

try the script now..
I have put a "<div style="margin:0; clear:left;"></div>" in the script.. i think it works better now..

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: