Register FAQ / Rules Forum Spy Search Today's Posts Mark Forums Read
Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Mar 1, 2013, 07:30 PM   #1
moonman239
macrumors 6502a
 
Join Date: Mar 2009
How do I set the position of an element relative to another element?

I need to position an element directly below another element, but I don't know the element's position, and I don't want to take the time to figure it out. I could probably whip up a little script, but is that the only way, or can I do it all in CSS?
__________________
The funny thing about this signature is that by the time you get to the end of it, you will have spent between five and ten seconds doing so.
moonman239 is offline   0 Reply With Quote
Old Mar 2, 2013, 03:41 AM   #2
Hexiii
macrumors 6502a
 
Hexiii's Avatar
 
Join Date: Jun 2011
Location: Prague, Czech Republic
Quote:
Originally Posted by moonman239 View Post
I need to position an element directly below another element, but I don't know the element's position, and I don't want to take the time to figure it out. I could probably whip up a little script, but is that the only way, or can I do it all in CSS?
I think the element will be automatically under it. What element are you talking about?
Hexiii is offline   0 Reply With Quote
Old Mar 2, 2013, 07:33 AM   #3
elppa
macrumors 68040
 
elppa's Avatar
 
Join Date: Nov 2003
Quote:
Originally Posted by moonman239 View Post
I need to position an element directly below another element, but I don't know the element's position, and I don't want to take the time to figure it out. I could probably whip up a little script, but is that the only way, or can I do it all in CSS?
I am not sure I am 100% certain of what you are asking, because you haven't really given enough information about the styling currently applied to the two elements in question.

If you do have parent element which is relatively positioned then by making the child element absolutely positioned you will ensure the child is always positioned relative to its parent.

By way of an example:

Code:
<!DOCTYPE html>

<html>
<head>
	<title>Positioning Example</title>
</head>

<body>	
	<div>
		parent element
		<div>child element</div>
	</div>
</body>
</html>
Code:
div {
	width: 200px;
	height: 200px;
}

body > div {
	position: relative;
	background: #f00;
	margin: 0 auto;
}

div > div {
	position: absolute;
	top: 200px;
	left: 50px;
	background: #ff0;
}
Thus you can easily position the child below the parent (provided you know the parents height).

If the elements are floated, then you can just clear floats. That will put on element below another.

We do probably need a bit more information about the current CSS properties applied to the elements to be able to help more though.
elppa is offline   0 Reply With Quote
Old Mar 3, 2013, 04:30 PM   #4
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
Elppa, maybe next time include ID's/classes in your div example because although "div > div" certainly is legal, it could be dangerous to use that example in a real site as some newbies would, affecting any div within another - what a potential mess. Using ID's/classes also helps newbies and guru's alike when debugging style issues, plus extremely useful if tied into Javascript methods.

Yep, I admit fully I am being picky here. My apologies for that, but of course nothing personal intended and of course your advice was spot on, as always.

Cheers to you, please don't kill me for this.

__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
Fix for deep set volume keys (Element Case) Partridge iPhone Accessories 0 May 13, 2013 11:54 PM
Element Sector 5 ? johns019 iPhone Accessories 3 Mar 24, 2013 09:00 PM
AppleScript: Set variable to every XML element of a given name moonman239 Mac Programming 13 Jan 2, 2013 02:55 PM
Element cases oTypically iPhone Accessories 10 Dec 29, 2012 12:21 AM

Forum Jump

All times are GMT -5. The time now is 04:53 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC