Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts

    how do i positition a div relative to another div?

    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?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    New Coder
    Join Date
    Jul 2005
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    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

  • #3
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    haha don't let my post-count fool you, i'm just very needy 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?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #4
    New Coder
    Join Date
    Jul 2005
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts
    haha don't let my post-count fool you, i'm just very needy lol
    lol, Just making sure!

    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
    Code:
    <!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
    Code:
    <!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
    Code:
    <!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:
    Code:
    <!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.
    Last edited by bubbisthedog; 01-29-2006 at 11:35 PM.

  • #5
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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:

    Code:
    <!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
    Last edited by canadianjameson; 01-30-2006 at 12:19 AM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #6
    New Coder
    Join Date
    Jul 2005
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by bubbisthedog; 01-30-2006 at 02:51 PM.

  • #7
    New Coder
    Join Date
    Jul 2005
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Perhaps the following will give you a starting point (You'll still have to position some things the way you want obviously.):
    Code:
    <!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

  • #8
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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:

    Code:
    <!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?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts

    Position:absolute is not always "absolute".

    Code:
    <!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).
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #10
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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?

    Code:
    <!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
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #11
    New Coder
    Join Date
    Jul 2005
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Glad it ending up working out for you!

    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

  • #12
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    hehe i posted again just as you did, so this is just to make sure you saw
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •