...

View Full Version : how do i positition a div relative to another div?



canadianjameson
01-29-2006, 10:14 PM
may seem simple but here:

If I have one div that is width: 500px, height: 500px and I want a second div to show 50px off the right side of the first div, how do i go about using the right side of the 500x500 div as a reference point?

bubbisthedog
01-29-2006, 11:38 PM
Hi, canadianjameson.

Considering the fact that you have 1300 posts on this forum, it's highly unlikely that my response will help you; but I'll give 'er a whirl.:rolleyes:

In the simplest, most basic of scenarios, if you include in the 'top' div tag style attribute 'float:left,' the next div tag in the code will be positioned to the right of it. Using 'clear:left' in that next tag's style attribute would force the 'top' one to move to the next 'line.' In the first div tag's style attribute, list a 'margin' property of 0px 50px 0px 0px to achieve a right margin of 50px. Is this close to what you were talking about?

HTH,

bubbis

canadianjameson
01-29-2006, 11:59 PM
haha don't let my post-count fool you, i'm just very needy :D lol

Thats actually exactly what I needed. See up until now I've used previously designed templates and just edited them, usually using HTML to adjust the attributes of the objects. This is my first attempt to do a fully-CSS page on my own (from scratch).... so i have a fair few newbie questions

To that end I will ask the following:

If I use float: left, will the next object I position automatically be positioned to the left of the first object, on the same horizontal line? or just below. I ask because I find myself needing to set ridiculous margins like margin-top: -359px just to get two divs to align their tops side by side
i've never seen clear:left, could you elaborate on it?

bubbisthedog
01-30-2006, 12:33 AM
haha don't let my post-count fool you, i'm just very needy lol
lol, Just making sure!:thumbsup:

How 'bout I post a couple of samples, and you can ask me questions about them, or tell me if we've found what you want:

left div, 100x100; right div, 500x500


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Strict//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict

.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"

xml:lang="en" lang="en">
<head>
<title>cjtest</title>
<style type="text/css">
#leftDiv { float:left; height:100px;

width:100px; border:solid 1px blue }
#rightDiv { float:left; height:500px;

width:500px; border: solid 1px red }
</style>
</head>
<body>
<div id="leftDiv">
Div 1
</div>
<div id="rightDiv">
Div 2
</div>
</body>
</html>

left div, 500x500; right div, 100x100


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Strict//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict

.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"

xml:lang="en" lang="en">
<head>
<title>cjtest</title>
<style type="text/css">
#leftDiv { float:left; height:500px;

width:500px; border:solid 1px blue }
#rightDiv { float:left; height:100px;

width:100px; border: solid 1px red }
</style>
</head>
<body>
<div id="leftDiv">
Div 1
</div>
<div id="rightDiv">
Div 2
</div>
</body>
</html>

left div, 100px wide, no height specified; right div, 500x500


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Strict//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict

.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"

xml:lang="en" lang="en">
<head>
<title>cjtest</title>
<style type="text/css">
#leftDiv { float:left;

width:100px; border:solid 1px blue }
#rightDiv { float:left; height:500px;

width:500px; border: solid 1px red }
</style>
</head>
<body>
<div id="leftDiv">
Div 1
</div>
<div id="rightDiv">
Div 2
</div>
</body>
</html>

The scenarios are virtually endless, so you really just need to play with it. It's important to note that if the browser size gets smaller than the divs' total width, you'll see strange things happen. One work-around is to give one of the divs a width in percentage, depending on whether or not the div's content can be 'crunched' or not:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Strict//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict

.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"

xml:lang="en" lang="en">
<head>
<title>cjtest</title>
<style type="text/css">
#leftDiv { float:left; width:100px;

border:solid 1px blue }
#rightDiv { float:left; height:300px;

width:30%; border: solid 1px red }
</style>
</head>
<body>
<div id="leftDiv">
Div 1
</div>
<div id="rightDiv">
Div 2
</div>
</body>
</html>


HTH

EDIT: clear:left just means to position a div below a floated div to the left of it. Most developers use clear:both on most occasions.

canadianjameson
01-30-2006, 01:15 AM
hmmmmmmm, i like

that has actually been very helpful.

I'll have to re-do my layout I think, because I dont think I am positioning properly here:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var oldS = null;
function toggle(id) {
if (oldS != null) {
oldS.display = "none";
}
var s = document.getElementById(id).style;
s.display = (s.display == "block" ? "none" : "block");
oldS = s;
}

/*var oldS = null; // use this if you want to be able to click the same link to hide the div.
function toggle(id) {
var s = document.getElementById(id).style;
if (oldS != null && oldS != s) {
oldS.display = "none";
}
s.display = (s.display == "block" ? "none" : "block");
oldS = s;
}
*/
</script>

<style type="text/css">

#thumbs {
width: 175px;
height: 400px;
margin-left: 75px;
margin-top: 100px
}
#thumbs div {
width: 75px;
height: 75px;
border: 1px solid black;
float: left;
margin: 5px 5px 5px 5px;
text-align: center;
}
#thumbnails {
width: 75px;
height: 75px
}
#slideShowControls {
display: inline;
width: 160px;
height: 30px;
position: relative;
margin-left: 85px;
margin-top: 15px;
float: left;
}
#gallery {
display: inline;
position: relative;
width: 425px;
height: 425px;
border: 1px solid black;
margin-left: 325px;
margin-top: -473px;
float: left
}
#description {
display: inline;
width: 425px;
height: 50px;
position: relative;
margin-left: 325px;
margin-top: -53px;
border: 1px solid black;
}
#materials {
padding: 5px 5px 5px 5px;
display: inline;
float: right;
position: relative;
margin-right: 60px;
margin-top: 100px;
}
#materials ul {
list-style:url(images/smallBull.gif) none outside;
padding:1px 0px 1px 15px;
margin:5px 0px 30px 0px;
font-style: italic;
}
#startShow {
display: block;
text-align: center;
}
#stopShow {
display: none;
text-align: center
}

</style>


</head>

<body>
<div id="materials">
Works on paper<ul><li>paintings</li><li>wall hangings</li><li>cards</li><li>plus ...</li></ul>
</div>
<div id="thumbs">
<div><img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt=""></div>
<div><img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt=""></div>
<div><img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt=""></div>
<div><img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt=""></div>
<div><img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt=""></div>
<div><img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt=""></div>
<div><img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt=""></div>
<div><img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt=""></div>
<div><img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt=""></div>
<div><img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt=""></div>
</div>

<div id="slideShowControls">
<div id="startShow"><a href="#" onclick="toggle('stopShow'); return false">Start Slideshow</a></div>
<div id="stopShow"><a href="#" onclick="toggle('startShow'); return false">Stop Slideshow</a></div>
</div>

<div id="gallery">
</div>

<div id="description">
</div>

</body>
</html>


how would i simplify things?

you can see it here: www.enviromark.ca/fvjones/galleryTry.htm

bubbisthedog
01-30-2006, 03:48 PM
One thing you could try is to put the "thumbs" div before the "materials" div, giving both a 'float:left' -with no 'clears.' Try after this to give "slideShowControls" a clear:left. You can get rid of the 'display:inline' in "slideShowControls," too, IMO. Notice in my CSS examples that the first divs is left and the second ones are right. I'd follow that approach if I were you (though others may see it differently, I've found it a successful approach).

HTH

bubbisthedog
01-30-2006, 04:55 PM
Perhaps the following will give you a starting point (You'll still have to position some things the way you want obviously.):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var oldS = null;
function toggle(id) {
if (oldS != null) {
oldS.display = "none";
}
var s = document.getElementById(id).style;
s.display = (s.display == "block" ? "none" : "block");
oldS = s;
}

/*var oldS = null; // use this if you want to be able to click the same link to hide the div.
function toggle(id) {
var s = document.getElementById(id).style;
if (oldS != null && oldS != s) {
oldS.display = "none";
}
s.display = (s.display == "block" ? "none" : "block");
oldS = s;
}
*/
</script>

<style type="text/css">
#thumbs {
float: left;
width: 175px;
border: 1px solid black;
margin: 5px;
text-align: center;
}
.thumbnails {
width: 75px;
height: 75px
}
#materials {
float:left;
height:300px;
width:400px;
padding: 5px 5px 5px 5px;
border:solid 1px;
margin:5px;
}
#materials ul {
list-style:url(images/smallBull.gif);
}
#slideShowControls {
clear:left;
float:left;
width:400px;
margin:15px 0px 0px 0px;
}
#startShow {
text-align: center;
}
#stopShow {
display: none;
text-align: center
}
#rightsideContent{
float:left;
width:400px;
}
</style>
</head>

<body>
<div id="thumbs">
<img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt="">
<img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt="">
<img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt="">
<img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt="">
<img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt="">
<img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt="">
<img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt="">
<img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt="">
<img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt="">
<img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt="">
</div>
<div id="rightsideContent">
<div id="materials">
Works on paper<ul><li>paintings</li><li>wall hangings</li><li>cards</li><li>plus ...</li></ul>
</div>
<div id="slideShowControls">
<div id="startShow"><a href="#" onclick="toggle('stopShow'); return false">Start Slideshow</a></div>
<div id="stopShow"><a href="#" onclick="toggle('startShow'); return false">Stop Slideshow</a></div>
</div>
</div>
</body>
</html>


HTH

canadianjameson
01-30-2006, 08:45 PM
bubbis i could kiss ya! of course i shall refrain, lol

i took your code examples and applied them to the page and here's what I came up with:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var oldS = null;
function toggle(id) {
if (oldS != null) {
oldS.display = "none";
}
var s = document.getElementById(id).style;
s.display = (s.display == "block" ? "none" : "block");
oldS = s;
return false;
}

/*var oldS = null; // use this if you want to be able to click the same link to hide the div.
function toggle(id) {
var s = document.getElementById(id).style;
if (oldS != null && oldS != s) {
oldS.display = "none";
}
s.display = (s.display == "block" ? "none" : "block");
oldS = s;
}
*/
</script>

<style type="text/css">
* {
padding: 0px;
margin: 0px
}
#thumbs div {
width: 75px;
height: 75px;
border: 1px solid black;
float: left;
margin: 5px 5px 5px 5px;
text-align: center;
}
#thumbnails {
width: 75px;
height: 75px
}
#thumbs {
float: left;
width: 175px;
height: 425px;
margin-left: 25px
}
#gallery {
float: left;
width: 425px;
height: 425px;
border: 1px solid black;
margin-left: 50px;
margin-top: 5px;
}
#materials {
float: left;
padding: 5px 5px 5px 5px;
margin-left: 50px;
}
#materials ul {
list-style:url(images/smallBull.gif) none outside;
padding:1px 0px 1px 15px;
margin:5px 0px 30px 0px;
font-style: italic;
}
#slideShowControls {
clear: left;
float: left;
width: 160px;
height: 30px;
margin-left: 25px;
margin-top: 10px;
text-align: center
}
#description {
float: left;
width: 425px;
height: 50px;
margin-left: 50px;
border: 1px solid black;
margin-top: 1px
}
#startShow {
display: block;
}
#stopShow {
display: none;
}

</style>


</head>

<body>
<div id="thumbs">
<div><img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt=""></div>
<div><img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt=""></div>
<div><img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt=""></div>
<div><img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt=""></div>
<div><img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt=""></div>
<div><img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt=""></div>
<div><img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt=""></div>
<div><img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt=""></div>
<div><img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt=""></div>
<div><img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt=""></div>
</div>
<div id="gallery"></div>
<div id="materials">Works on paper<ul><li>paintings</li><li>wall hangings</li><li>cards</li><li>plus ...</li></ul></div>
<div id="slideShowControls">
<div id="startShow"><a href="#" onclick="return toggle('stopShow');">Start Slideshow</a></div>
<div id="stopShow"><a href="#" onclick="return toggle('startShow');">Stop Slideshow</a></div>
</div>
<div id="description">
</div>

</body>
</html>


looks exactly the way I want it :)

Just out of curiosity: now that i've dispensed with all the display: inlines and position: relatives... what should they actually be used for?

_Aerospace_Eng_
01-30-2006, 08:58 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
border:0;
font-size:0.85em;
font-family:Verdana, Arial, Helvetica, sans-serif;
background:#FFF;
color:#000;
}
#main {
background:#F00;
color:#000;
border:1px solid #000;
margin:40px auto;
width:500px;
height:500px;
position:relative; /*this is the key to making this work*/
text-align:center;
}
#box {
position:absolute;
top:50px;
right:50px;
width:50px;
height:50px;
background:#FFF;
color:#000;
border:1px solid #000;
}
</style>
</head>

<body>
<div id="main">Main
<div id="box">Box</div>
</div>
</body>
</html>

Try the above example. The relative positioning in the main divs allows the next div to use the corners of that div as reference rather than the browser window (body).

canadianjameson
01-30-2006, 09:21 PM
quick question: I implimented the changes on the main page here: www.enviromark.ca/fvjones/index2.htm and for some reason i cannot add margin-bottom: 40px to the container div #artGallery.

any idea why?



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
var oldS = null;
function toggle(id) {
if (oldS != null) {
oldS.display = "none";
}
var s = document.getElementById(id).style;
s.display = (s.display == "block" ? "none" : "block");
oldS = s;
window.location.href='#bottom';
return false;
}

/*var oldS = null; // use this if you want to be able to click the same link to hide the div.
function toggle(id) {
var s = document.getElementById(id).style;
if (oldS != null && oldS != s) {
oldS.display = "none";
}
s.display = (s.display == "block" ? "none" : "block");
oldS = s;
}
*/
</script>

<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
height:100%;
font-family: "verdana", trebuchet ms, arial, sans-serif;
font-size: 11px;
font-weight: bold;
}
A:link, A:visited, A:active {
text-decoration: none; color: white;
}
A:hover {
text-decoration: underline; color: white;
}
#pageContainer {
background-image: url(images/background.jpg);
height: 100%;
}
#topBar {
height: 75px;
}
#header {
background: #FFFFFF;
text-align: center;
border-bottom: solid 1px black;
}
#topMenu {
height: 175px;
border-bottom: solid 1px white;
border-top: solid 1px white;
text-align: center;
}
#jonesArt {
position: relative;
margin-left: 60px;
margin-top: 15px;
float: left;
display: inline;
text-align: left;
width: 130px
}
#jonesArt p {
margin-top: 15px;
}
#fvjdesign {
position: relative;
margin: 15px 190px 0 190px;
}
#fvjdesign p {
margin-top: 5px;
}
#efviCollections {
position: relative;
margin-top: 15px;
margin-right: 60px;
float: right;
display: inline;
text-align: right;
width: 150px;
}
#efviCollections p {
margin-top: 40px;
}
#leftCornerLinks {
float: left;
text-align: left;
color: white;
padding: 6px;
border-bottom: solid 1px white;
border-right: solid 1px white;
/*position: relative;
margin-top: 1px;
z-index: 1;*/
}
#spacer {
height: 100px;
}
#biographicalNotes{
display: none;
margin-left: 250px;
padding-bottom: 125px;
line-height: 1.8;
color: white;
font-weight: normal;
font-size: 16px
}
br.heading {
font-size: 20px
}
#artistStatement {
display: none;
margin-left: 250px;
padding-bottom: 125px;
line-height: 1.8;
color: white;
font-weight: normal;
font-size: 16px
}
#asRight {
display: inline;
float: right;
margin-right: 200px;
margin-top: -125px;
font-size: 12px;
}
#productSpectrum {
display: none;
margin-top: 25px;
text-align: left;
color: #FFFFFF;
font-size: 13px
}
#productSpectrum ul {
list-style:url(images/smallBull.gif) none outside;
padding:1px 0px 1px 15px;
margin:5px 0px 30px 0px;
font-style: italic;
}
#psLeft {
float: left;
width: 125px;
margin-left: 75px;
}
#psLeft p {
margin-bottom: 100px;
}
#psMid {
float: left;
width: 175px;
height: 150px;
margin-left: 100px;
}
#psRight {
float: left;
height: 150px;
margin-left: 100px;

}
#psRight p {
margin-bottom: 100px;
}
.heading {
font-size: 20px
}
.indent {
margin-left: 20px;
}
#artGallery {
display: none;
margin-top: 40px;
margin-bottom: 40px;
font-size: 13px;
}
#thumbs div {
width: 75px;
height: 75px;
border: 1px solid black;
background-color: white;
float: left;
margin: 5px 5px 5px 5px;
text-align: center;
}
#thumbnails {
width: 75px;
height: 75px
}
#thumbs {
float: left;
width: 175px;
height: 425px;
margin-left: 40px
}
#gallery {
float: left;
width: 425px;
height: 425px;
border: 1px solid black;
margin-left: 50px;
margin-top: 5px;
}
#materials {
float: left;
padding: 5px 5px 5px 5px;
margin-left: 50px;
color: white
}
#materials ul {
list-style:url(images/smallBull.gif) none outside;
padding:1px 0px 1px 15px;
margin:5px 0px 30px 0px;
font-style: italic;
}
#slideShowControls {
clear: left;
float: left;
width: 160px;
height: 30px;
margin-left: 25px;
margin-top: 10px;
text-align: center
}
#description {
float: left;
width: 425px;
height: 50px;
margin-left: 50px;
border: 1px solid black;
margin-top: 1px
}
#startShow {
display: block;
}
#stopShow {
display: none;
}
</style>

</head>

<body>
<div id="pageContainer">
<div id="topBar"></div>
<div id="topMenu">
<div id="jonesArt"><img src="images/jonesArt.jpg" width="80" height="80" alt=""><p><img src="images/jonesArt_text.gif" width="71" height="29" alt=""></p></div>
<div id="efviCollections"><img src="images/efviCollections.jpg" alt="">
<p><script language="JavaScript" type="text/JavaScript">
<!--
var name = "fvjones";
var domain = "concordia.ca";
document.write('<a href="mailto:' + name + '@' + domain + '" onmouseover="window.status=\'Click here to send an e-mail to '+ name + '@' + domain+'\';return true" onmouseout="window.status=\'\'"><img src="images/efviCollections_text.gif" border="0" alt=""></a>');
// -->
</script></p></div>
<div id="fvjdesign"><img src="images/fvdesign.jpg" alt=""><p><img src="images/fvdesign_text.gif" alt=""></p></div>
</div>
<div id="leftCornerLinks"><a href="#" onclick="toggle('artGallery')">Art Gallery</a><br><a href="#" onclick="toggle('artistStatement')">Artist's Statement</a><br><a href="#"onclick="toggle('biographicalNotes')">Biographical Notes</a><br><a href="#" onclick="toggle('productSpectrum')">Product Spectrum</a></div>
<div id="spacer"></div>
<div id="artistStatement">
<span class="heading">artist's statement ...</span>
<br>
<br>"In a world of checks and balances
<br>where two + two predictably equal four
<br>how delicious it is to savour
<br>a state
<br>of mind and heart where
<br>the bottom line need never
<br>be straight."
<br>___________
<div id="asRight">
<br> francine v. jones
<br>
<br>t.<span class="indent">514.481.3739</span>
<br>f<span class="indent">&nbsp;514.481.3739</span>
<br>e<span class="indent"><script language="JavaScript" type="text/JavaScript">
<!--
var name = "fvjones";
var domain = "concordia.ca";
document.write('<a href="mailto:' + name + '@' + domain + '" onmouseover="window.status=\'Click here to send an e-mail to '+ name + '@' + domain+'\';return true" onmouseout="window.status=\'\'">francine.jones@concordia.ca</a>');
// -->
</script></span>
<br><br><br><a name="bottom" title="">&nbsp;</a>
</div>
</div>
<div id="biographicalNotes">
<span class="heading">francine v. jones
<br>a few biographical notes...</span>
<br>
<br>a native montréaler
<br>francine v. jones revisited art, her first love, in the late 1990's
<br>choosing watercolour as her primary medium
<br>for its independent nature, unpredictability and fluid grace.
<br>
<br>Her works includes paintings, monoprints and collages . . .
<br>recently complemented by a selection of
<br>unique gold and silver jewellery created in the spirit of wearable sculpture.
</div>
<div id="productSpectrum">
<div id="psLeft">
<p>JONES art</p>
<p>FV design</p>
<p>EFVI collections</p>
</div>
<div id="psMid">
Works on paper<ul><li>paintings</li><li>wall hangings</li><li>cards</li><li>plus ...</li></ul>

Decorative Accessories<ul><li>frames</li><li>trays</li><li>platters</li><li>plus ...</li></ul>

Jewellery<ul><li>rings</li><li>bracelets</li><li>necklaces</li><li>plus ...</li></ul>
</div>
<div id="psRight">
<p>Watercolour & Mixed Media</p>
<p>Silver & Mixed Media</p>
<p>Silver & Gold</p>
</div>
</div>
<div id="artGallery">
<div id="thumbs">
<div><img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt=""></div>
<div><img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt=""></div>
<div><img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt=""></div>
<div><img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt=""></div>
<div><img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt=""></div>
<div><img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt=""></div>
<div><img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt=""></div>
<div><img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt=""></div>
<div><img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt=""></div>
<div><img class="thumbnails" src="images/paintings/redflowersThumb.jpg" alt=""></div>
</div>
<div id="gallery"></div>
<div id="materials">Works on paper<ul><li>paintings</li><li>wall hangings</li><li>cards</li><li>plus ...</li></ul></div>
<div id="slideShowControls">
<div id="startShow"><a href="#" onclick="return toggle('stopShow');">Start Slideshow</a></div>
<div id="stopShow"><a href="#" onclick="return toggle('startShow');">Stop Slideshow</a></div>
<script type="text/javascript">
//window.onload = function(){
//oldS = document.getElementById("startShow").style;
//}
</script>
</div>
<div id="description"></div>
</div>
</div>
</body>
</html>

i bolded it.

its odd, because margin-top works fine. I even threw in a bunch of <br>'s right after the <div id="description"></div> and the extra lines just wont show

bubbisthedog
01-30-2006, 09:22 PM
Glad it ending up working out for you!:thumbsup:

In-depth on display property (you may've already seen it): http://www.quirksmode.org/css/display.html
Relative positioning is the default positioning for divs.

Regards,

bubbis

canadianjameson
01-30-2006, 09:23 PM
hehe i posted again just as you did, so this is just to make sure you saw :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum