Forum Moderators: not2easy
I seem to be struggling to get to grips with some basic concepts relating to DIVs and hope that someone might be able to point me in the right direction with a couple of issues.
Issue 1)
I would like the "box" in its containing div, to be positioned where I specify (in relation to the containing div). This is actually as it's setup now, however, there is a space created above the word "Title" that seems to be taken up by the "box" (i.e. its source code position), even though the "box" is positioned elsewhere using css.
The "box" needs to be relative to the containing DIV, so it needs to be where it is now in the source code (or does it?), so how can I get rid of the space above the word "Title" yet still position the "box" relative to the containing DIV?
Issue 2) Hopefully an easy one :) How can I centre the word "box" verticlaly as well?I have tried "vertical-align" but it seems to be ignored.
Many thanks for any help.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Relative Positioning</title>
</head>
<body>
<div style="width:200px;height:200px;border:1px solid black;">
<div style=" POSITION: relative; LEFT:145px; TOP:145px; WIDTH:50px; HEIGHT:50px; border:1px solid black;text-align:center; ">box</div>
Title <br />
<img src="images/blank.gif" width="100" height="10" border="1" alt="" />
</div>
</body>
</html>
I would like the "box" in its containing div, to be positioned where I specify (in relation to the containing div)
To position with respect to a parent element's coordinates you set
position:absoluteon the child and make the parent a 'positioned element' - 'positioned' here meaning a non-static value of position. Currently you're using
position:relativeon your child div. This doesn't take the element out of flow, just moves where its rendered around. So:
HTML:
<div id="container">
<div>box</div>
Title
</div>CSS:
#container {
width:200px;
height:200px;
border:1px solid black;
position:relative; // force absolute children to calculate from here
}
#container div {
position: absolute;
left:145px;
top:145px;
width:50px;
height:50px;
border:1px solid black;
text-align:center;
}I took the liberty of splitting out your HTML and CSS for clarity, and removing the <br> and <img> as they didn't seem to be doing anything (I added padding to bottom of the box to replicate this).
With regards to your second question, this is actually harder than you'd think with CSS [webmasterworld.com] :) It's worth having a read through that thread but #1 is probably the easiest for you to implement here.
[edited by: Robin_reala at 9:57 pm (utc) on June 7, 2007]
