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 :)
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?
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 :)
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..
__________________
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 :)
Last edited by canadianjameson; 01-30-2006 at 12:19 AM..
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..
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 :)
<!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!||||
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"> 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=""> </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 :)
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 :)
Before you post, read our: 
lol
