relative Positioning Problem

Dunce · #1 Jun 7th, 2007, 15:52

Hi,
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.

Code: Select all

<!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="http://www.webforumz.com/images/blank.gif" width="100" height="10" border="1" alt="" />
 
</div>
</body>
</html>

chubbs · #2 Jun 7th, 2007, 18:34

First try to separate the layout from the content. I mean create a css file and define styles there

Lchad · #3 Jun 7th, 2007, 21:48

First of all each div that is a separate container should be labeled <div id="box"></div>

Then to do a box inside a box (nested div) you can use a div id but I'll use a div class for demonstration purposes so you can see both.

Code: Select all

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
#box { width: 200px;
    height: 160px;
    border: #000000 1px solid;
    text-align: center;
    padding-top: 40px;
    }
.insidebox {
    width: 50px;
    height: 50px;
    position: relative;
    top: 105px;
    left: 70px;
    border:1px solid black;
    
    }
</style>
</head>

<body><div id="box">
      <div class="insidebox">Title</div>
</div>
</body>
</html>

You really have to play around with the numbers to get things to align the way you wanted. I know valign is not a valid css style so you can't do that. I've heard it mentioned here how to do it but can't remember exactly. It's 50% of the height... blah blah blah..

But I did the same thing with the padding-top.
Play with this and see what I did.

This might shed some light on your questions.

If you have more questions or I misunderstood the question, let me know!

Dunce · #4 Jun 8th, 2007, 08:14

Quote:

Originally Posted by chubbs

First try to separate the layout from the content. I mean create a css file and define styles there

Thanks for the reply, but seperating the styles does not address the issue at all, perhaps my explanation wasn't clear enough, may apologies for that.

Thanks anyway

Dunce · #5 Jun 8th, 2007, 08:26

Thanks Lchad for the reply. The main issue is actually not the alignment at all, It's the odd space that appears above the content.

As I understand it, for the insidebox to be relative to the main container (which I need it to be), the DIVS must be nested as such in source code (which they are). For some reason, this creates space above OTHER content in the main container, as though it has been allocated to the insidebox DIV (even though its positioned elsewhere).

So my question is; Why is this space being allocated to a DIV that is not there?

This is not a browser issue since it appears exactly the same in all browsers I have tried it in.

Many thanks for any help

Mark

Dunce · #6 Jun 8th, 2007, 10:01

Hi,
Just in case it helps anyone else, I have solved the issue.
Containing DIV: setting this to "position:relative;" ensures that any elements within this DIV will be positioned relative to ITSELF (I didnt know that

.
This means that any nested divs can then be positioned using ABSOLUTE and importantly, they will take their TOP and LEFT positions from the Containing DIV. SO...Since the nested elements are using "position:absolute;", they do NOT TAKE UP ANY SPACE OTHER THAN the position they are set to.
So the ammended code produces the desired result..

Code: Select all

<!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>
<style>
#container { width: 200px;
height: 200px;
border: #000000 1px solid;
padding-top: 40px;
position:relative;
padding:2px;
}
#insidebox {
width: 40px;
height: 40px;
bottom: 1px;
right: 1px;
border:1px solid red;
position:absolute;
}
</style>
<body>
<div id="container">Some Title <br />
<div id="insidebox">box</div>
<img src="http://www.webforumz.com/images/someImage.gif" width="100" height="10" border="1" alt="" />
 
</div>
</body>
</html>

Lchad · #7 Jun 8th, 2007, 10:54

Glad you figured out your issue!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CSS Relative <DIV> Size Problem	andycain	Web Page Design	6	Nov 29th, 2007 14:32
positioning - relative or absolute?	google	Web Page Design	13	Nov 8th, 2007 16:00
CSS positioning help - relative to background image	sj2as	Web Page Design	1	Sep 12th, 2007 01:27
Background color problems with relative positioning	kirkham85	Web Page Design	3	May 12th, 2007 22:53
relative position problem	antonyx	Web Page Design	12	Dec 30th, 2005 21:19

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
relative Positioning Problem