Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 252
  • 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
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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