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

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

How to dynamically move divs in Dreamweaver

Hi

I am developing a site which you can find here:

http://www.greatfindcollectibles.com/

My question is the div that holds the menu can grow and shrink depending on how many items there are in the database. How can I make the divs Search and Mailing list move up and down depending on the height of the menu div?

Thanks

Nick Steele
0
nsteele84
Asked:
nsteele84
  • 3
  • 2
1 Solution
 
andreyman3d2kCommented:
Set the position: relative; on the menu div. This makes the position of lower divs 'relative' to that one.
0
 
nsteele84Author Commented:
Unfortunately when I do that the auto height does not work
0
 
vimalrajaCommented:
Hi,
Saw your code, I don't you need to position any of the div via "position:absolute"... Just a quick fix, replace #Logo, #Categories, #Search, #MailingList styles with the following code. Hopefully mailing list and search will move up and down according to the categories div. :)
#Logo {
border:thin solid #000000;
height:257px;
margin:3px 0 0 7px;
width:853px;
}

#Categories {
border:thin solid #000000;
float:left;
clear:left;
margin:3px 0 0 7px;
width:189px;
}

#Search {
border:thin solid #000000;
clear:left;
float:left;
height:73px;
margin:3px 0 0 7px;
width:191px;
}

#MailingList {
border:thin solid #000000;
clear:left;
float:left;
height:71px;
margin:3px 0 0 7px;
width:192px;
}

Open in new window

0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
andreyman3d2kCommented:
Set the position of the Mailing List and Search div to "relative" also (You will need to play with positioning abit).
0
 
andreyman3d2kCommented:
Here, I played with the positioning -- try this in place of your current CSS:
<style type="text/css">
<!--

#container {
	background-color: #FFF;
	height: 900px;
	width: 870px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	text-align: left;
}
#body {
	text-align: center;
	background-color: #FFF;
}
body {
	background-image: url(images/gradfill.jpg);
	background-color: #255980;
}
#Logo {
	position:absolute;
	left:6px;
	top:3px;
	width:853px;
	height:257px;
	z-index:1;
	border: thin solid #000;
}
#Categories {
	position:relative;
	left:8px;
	top:269px;
	width:189px;
	min-height:80px;
	z-index:2;
	border: thin solid #000;
	height: auto;
}
#CategoriesInner {
position:relative;
width:189px;
	min-height:80px;
	height:auto;
}
#Cart {
	position:absolute;
	left:657px;
	top:269px;
	width:200px;
	height:65px;
	z-index:3;
	border: thin solid #000;
}
#Search {
	position:relative;
	left:7px;
	top:275px;
	width:191px;
	height:73px;
	z-index:4;
	border: thin solid #000;
}
#Featured {
	position:absolute;
	left:657px;
	top:418px;
	width:200px;
	height:460px;
	z-index:5;
	border: thin solid #000;
}
#MainArea {
	position:absolute;
	left:211px;
	top:269px;
	width:432px;
	height:610px;
	z-index:6;
	border: thin solid #000;
	overflow:scroll
}
#Account {
	position:absolute;
	left:658px;
	top:343px;
	width:201px;
	height:66px;
	z-index:7;
	border: thin solid #000;
}
#MailingList {
	position:relative;
	left:7px;
	top:280px;
	width:192px;
	height:71px;
	z-index:8;
	border: thin solid #000;
}

-->
</style>

Open in new window

0
 
nsteele84Author Commented:
Thanks to everyone for help
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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