Div Tag Positioning 3

Jimuniguy · Jul 26, 2002

Hi,

Say I have a box in the top right hand corner of the screen. This is absolute positionined.

I now need a piece of text which is:

A) Underneath the box, no matter how it grows in size
B) Needs to be positioned at the far left of the screen.

Hows it done please?

Cheers

James

cian · Jul 26, 2002

Can you clarify, does the text need to be below the level of the right box AND postioned on the left or are they two separate things you want?

É

http://www.endamcg.com/finland-gaa

Jimuniguy · Jul 26, 2002

Hi,

yes the text needs to be below the box AND positioned on the left

Cheers

james

cian · Jul 26, 2002

Hi,

This is what I would do:

<div id="rht"></div>
and the styles
#rht{
position: absolute;
top: 0px;
right: 0px;
height: 50px; /*i'm just taking these as an example*/
width: 50px; /*i'm just taking these as an example*/
}

your left text

<div id="txt">TEXT</div>
and the styles

#txt{
margin: 60px 0px 0px 0px;
}

#txt will have a top margin of 60px putting it 10px below the right box and margins of 0px on the right, bottom and left. It will naturally align to the left and it will expand to the width. It will also resize easily.

Is this what u need??

É

http://www.endamcg.com/finland-gaa

Jimuniguy · Jul 26, 2002

Hi,

No its not because as your RHT expands, it will layover the top of the one below it.

Anyone else?

Cheers

James

cian · Jul 26, 2002

I assumed our right wouldnt expand. If it going to expand down(??) then just put a suitable right margin on the left one so it wont cross it, or else a fixed width so they cant cross each other.

Alternatively set the z-index for the layers so that the right box hides behind the left one?

É

http://www.endamcg.com/finland-gaa

Jimuniguy · Jul 26, 2002

Hi,

Can not use a Z-index as they both need to be visible.

Neither can I use a fixed width as the text inside can expand to whatever the user chooses for a font size.

Right margin won't work as it needs to be placed under it, not to the side.

James

cian · Jul 26, 2002

Then you need to create two "rows" with the right box left aligned in the top row and the left text in the lower row. As the top box and therefore top row expand it will push the bottom row down. You cant use absolute positioning for this, but you shouldnt need to, just use margins and alignment etc to get your positioning.

É

http://www.endamcg.com/finland-gaa

starway · Jul 26, 2002

Add [tt]clear:left[/tt] to the text:

.lowertext {
...
clear: left;
...
}

The [tt]clear[/tt] property sets restrictions on where a floating element can be place with respect to previously placed element.
It should only be applied to block-level elements.

The [tt]left|right[/tt] value requires that a floating element must be placed lower than the previously occurring element on the specified side.

Jimuniguy · Jul 26, 2002

Hi,

Cian - Two rows in a div tag? How?

Starway - That fails to work.

Here is my code. I have made the text the largest that the user can get, and if displyed on a 1000x800 resolution, you will see the problem.

The title of ALS and Centre of Learning Devolpment must come underneath

Code:

<html>
<head>
<title>Assisted Learning Technology</title>
<META http-equiv=Content-Type content=&quot;text/html; charset=windows-1252&quot;>
<style type=&quot;text/css&quot;>

.Backgroundtext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:30px;
	font-weight: normal;
	color:#000000;
	text-align: justify;
}

.titletext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:20px;
	font-weight: Bold;
	color:#000000;
	text-align: justify;
}

.majortext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:40px;
	font-weight: Bold;
	color:#000000;
	text-align: justify;
}

</style>	 
</head>
<body>

<Div style=&quot;position: absolute; visibility: visible; left: 10px; top: 10px;&quot;>
<a href=&quot;[URL unfurl="true"]http://www.address.com&quot;>[/URL]
<img src=&quot;../Images/unis2.gif&quot; width=186 height=70 border=0></a> </div>

<div id=&quot;links&quot; class=&quot;backgroundtext&quot; style=&quot;position: absolute; height: auto; width: auto; 

top: 10px; right: 10px;&quot;> 
  Links:<br>
  <a  href=&quot;[URL unfurl="true"]http://www.address.com&quot;>Centre[/URL] for Learning Developments</a><br>
  <a  href=&quot;[URL unfurl="true"]http://www.address.com/&quot;>The[/URL] Name of The Library</a><br>
  <a  href=&quot;[URL unfurl="true"]http://www.address.com&quot;>Assisted[/URL] Learning Support</a><br>
  <a  href=&quot;../asp/address&quot;>The Address </a></div> 
<DIV STYLE=&quot;position: relative; top: 100; width: 100%;&quot;>
<DIV STYLE=&quot;position: relative; visibility: visible; left: 0px; top: 0px; &quot;>

<DIV style=&quot;position: relative; visibility: visible; left: 140px; top: 0;&quot;> 
  <DIV class=&quot;titletext&quot; style=&quot;position: relative; left: 20; clear: left;&quot;> 
  Centre for Learning Developements<br></div>
  <DIV class=&quot;majortext&quot; style=&quot;position: relative; left: 20; clear: left;&quot;> Additional 

Learning 
    Support </div>
</div>
</Div>
</body>
</html>

Cheers

James

cian · Jul 26, 2002

I'll give ya a star for that cos I never thought of it!

É

http://www.endamcg.com/finland-gaa

Jimuniguy · Jul 26, 2002

Hi,

Its worth the star, but it don't fix the problem.

All thoose other Div tags are there because later on in the page, elements hang off them.

Cheers

James

cian · Jul 26, 2002

Two rows
<div id="tr" align="right">box here</div>
<div id="br" align="left">text here</div>

I thought this would be a simple approach!

É

http://www.endamcg.com/finland-gaa

Jimuniguy · Jul 26, 2002

Hi,

The two still overlap, even worse then before!

My code is above for tinkering with.

James

cian · Jul 26, 2002

1. there was a missing div tag.
2. I got the links box and removed the absolute positioning, then enclosed it in a div with the contents aligned right.

Try it and see if thats what you are looking for, cos now i'm not sure what you need!

É

http://www.endamcg.com/finland-gaa

starway · Jul 26, 2002

You should be very careful about nested block elements if you use CSS positioning!
There are too many nested elements and you cannot find a source of a problem.
. . .
<DIV style="position: relative; visibility: visible; left: 140px; top: 0;">
<DIV class="titletext" style="position: relative; left: 20; clear: left;">
Centre for Learning Developements<br></div>
<DIV class="majortext" style="position: relative; left: 20; clear: left;"> Additional
Learning
Support </div>
</div>
<Div>
. . .

I removed highlited code and my suggestion works as it should. By the way, my change didn't affected visually on anything, that's a sign that this code was useless.

Another advise: place ALL styles to the <head> and don't use inline styles - you'll be able to see all the code in one place. It helps to see the whole picture.

cian · Jul 26, 2002

One thing I find helps me is to give all divs a border to see what's going where!

James doing what I did above I can see:

image..................links
.......large text...........

Is that what you need or does the large text have to overlap a little on the block above?

É

http://www.endamcg.com/finland-gaa

Jimuniguy · Jul 26, 2002

Hi,

I have found the route of the cause.

Its not the div tags, or the clear:left but my brower has become come corrupt.

It still displays everthing on top of each other, yet my server displays it just fine. Some other ones i have tested it upon also show my browser is corrupt.
[sadeyes]

Starway - Cheers mate, you where right all along, just the browser would not let me see. However, I always find it easier to put style tags inline when doing div tags (I'm dyslexic so i see it all different). However thoose other div tags you just took out are actually needed when you see the entire page, there not just useless ones sitting there.

CianYer that last diagram mate is just how i am wanting to it, but first I got to reinstall this browser.

Cheers you guys

James

Jimuniguy · Jul 26, 2002

Hi,

Actually there is a fault here,

The Links text overwrites the Image, even align right does not work on it.

Suggestions (and no its not my browser this time!

James

Jimuniguy · Jul 26, 2002

Hi,

Nah this still fails, and now it fails on all browsers, not just mine.

Its still overwriting the code.

I can provide piccys and everything!

James

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Div Tag Positioning 3

Technical User

Technical User

Technical User

Technical User

Technical User

Technical User

Technical User

Technical User

Programmer

Technical User

Technical User

Technical User

Technical User

Technical User

Technical User

Programmer

Technical User

Technical User

Technical User

Technical User

Similar threads

Log in

Part and Inventory Search

Sponsor