8 Replies - 644 Views - Last Post: 18 February 2010 - 12:03 PM

#1 Guest_Codey09*


Reputation:

Div Positioning

Posted 15 February 2010 - 02:22 PM

Why does every single browser place the divs in a different place.
I have 4 div elemnets on my page, I want them to sit 2 across on the page, so I wrote the css setting the absolute positioning left and top setting so the divs are in line with each other and are where I want them.
Great works in Live Veiw, but when I test the page in 5 major browsers the div are not where they are supposed to be, some are way over to the left and some way over on the right.
The only browser to get it any close to where they were supposed to be was Internet Explorer!

Help!

Is This A Good Question/Topic? 0

Replies To: Div Positioning

#2 Codey09  Icon User is offline

  • D.I.C Head

Reputation: 7
  • View blog
  • Posts: 210
  • Joined: 20-August 09

Re: Div Positioning

Posted 15 February 2010 - 02:24 PM

This is my Thread, don't know why it said I was a Guest I thought I was logged in!
Was This Post Helpful? 0
  • +
  • -

#3 Codey09  Icon User is offline

  • D.I.C Head

Reputation: 7
  • View blog
  • Posts: 210
  • Joined: 20-August 09

Re: Div Positioning

Posted 15 February 2010 - 02:34 PM

View PostCodey09, on 15 February 2010 - 08:24 PM, said:

This is my Thread, don't know why it said I was a Guest I thought I was logged in!

ok, I sussed it needed to use relative posititioning instead of absolute positioning
Was This Post Helpful? 0
  • +
  • -

#4 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1359
  • View blog
  • Posts: 3,425
  • Joined: 28-November 09

Re: Div Positioning

Posted 15 February 2010 - 02:59 PM

Not a good idea, I'd use floats instead to get it to work.
Was This Post Helpful? 0
  • +
  • -

#5 tim4christ  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 4
  • View blog
  • Posts: 164
  • Joined: 11-August 09

Re: Div Positioning

Posted 16 February 2010 - 07:29 PM

I use dreamweaver and get this problem ALL THE TIME!! So far, I've learned to work around it though. Is this a common problem with absolutely positioned divs? I would use relative positioning but dreamweaver doesn't use relatively positioned elements very well :sad3:
Was This Post Helpful? 0
  • +
  • -

#6 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1359
  • View blog
  • Posts: 3,425
  • Joined: 28-November 09

Re: Div Positioning

Posted 16 February 2010 - 09:27 PM

By using relative you have to remember what it's relative to.
Was This Post Helpful? 0
  • +
  • -

#7 tim4christ  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 4
  • View blog
  • Posts: 164
  • Joined: 11-August 09

Re: Div Positioning

Posted 17 February 2010 - 08:28 AM

Right...that's one of the reasons I don't like relative positioning!! Is there something we're doing wrong as we position our divs absolute? Or is this just a common problem that every developer has to deal with?
Was This Post Helpful? 0
  • +
  • -

#8 Naturalcauz  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 29-September 08

Re: Div Positioning

Posted 18 February 2010 - 11:44 AM

Im kinda new to the whole web development process, but the way I see others set their divs up is that they have one div as a page container set to relative. Then they place the other divs inside that container and set them to absolute. That way they can position them anyway they want inside that relative container. I dont know if you have yours like this since you didnt post your html/css code. I'm not sure if I explained that well enough since im knda new lol, but i hope you get my point. But you pretty much need something set to relative to position your absolutes correctly.

If im wrong html/css vets please correct me lol.
Was This Post Helpful? 0
  • +
  • -

#9 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1359
  • View blog
  • Posts: 3,425
  • Joined: 28-November 09

Re: Div Positioning

Posted 18 February 2010 - 12:03 PM

Very off.

Container, yes.

A basic structure:
<html>
<head>

<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<div id="container">
	
	<div id="header">
		
		<ul id="navigation">
			<li><a href="#" class="here">Test</a></li>
			<li><a href="#">Test</a></li>
			<li><a href="#">Test</a></li>
			<li><a href="#">Test</a></li>
		</ul>
		
	</div>
	
	<div id="body">
		
		<div id="content">
		
			<div id="left">
				<h1>Lorem Ipsum</h1>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue tempor augue, eget tempor sapien facilisis a. Sed convallis pretium libero cursus congue. Nulla quis arcu enim, ut consectetur tortor. Aenean risus lorem, pretium vitae semper eu, scelerisque vitae nulla. Quisque leo massa, fermentum cursus tincidunt eget, commodo ac nisi. Suspendisse felis enim, faucibus at sodales ut, condimentum ac nisl. Suspendisse potenti. Suspendisse pretium nunc libero, sed ullamcorper diam. Maecenas non nibh id erat cursus tincidunt. Nunc at odio nisi. Integer nec ultricies erat. Nam eros justo, viverra faucibus auctor eu, elementum iaculis orci. Etiam bibendum accumsan diam vitae ornare. Nam est felis, accumsan a vulputate vel, ultrices in quam. Nulla sagittis tortor sapien.
				</p>
			</div>
			
			<div id="right">
				<h1>Lorem Ipsum</h1>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue tempor augue, eget tempor sapien facilisis a. Sed convallis pretium libero cursus congue. Nulla quis arcu enim, ut consectetur tortor. Aenean risus lorem, pretium vitae semper eu, scelerisque vitae nulla. Quisque leo massa, fermentum cursus tincidunt eget, commodo ac nisi. Suspendisse felis enim, faucibus at sodales ut, condimentum ac nisl. Suspendisse potenti. Suspendisse pretium nunc libero, sed ullamcorper diam. Maecenas non nibh id erat cursus tincidunt. Nunc at odio nisi. Integer nec ultricies erat. Nam eros justo, viverra faucibus auctor eu, elementum iaculis orci. Etiam bibendum accumsan diam vitae ornare. Nam est felis, accumsan a vulputate vel, ultrices in quam. Nulla sagittis tortor sapien.
				</p>
			</div>
			<br class="clear" />
		</div>
		
	</div>
	
	<div id="footer">
		<p>&copy; Brandon Weaver 2010</p>
	</div>
	
	
</div>
</body>
</html>



And I wouldn't have to use a single positioning method other than float to get that to work.

This post has been edited by Lemur: 18 February 2010 - 12:04 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1