Log In · Register

 
Div Content Alignment, Shows up fine on my computer, not so great on others
Unfold
post Oct 16 2007, 05:32 PM
Post #1


Always Move Fast
****

Group: Member
Posts: 167
Joined: Aug 2005
Member No: 192,635



My div content looks fine on my computer, but when I look at it on different computers, it's misaligned. The content moves to the left on other computers rather than staying in the center. Is there any way I can fix this?

Other users have said it looks fine on their screen, but some others not. So here is my link: http://www.myspace.com/_p_0

Thanks in advance!
 
 
Start new topic
Replies (1 - 9)
digitalfragrance
post Oct 16 2007, 05:36 PM
Post #2


Adobe Addict
******

Group: Staff Alumni
Posts: 1,237
Joined: Mar 2005
Member No: 113,043



What resolution and browser are you using? It looks fine on my computer (internet explorer) and my resolution is large.
 
Unfold
post Oct 16 2007, 05:46 PM
Post #3


Always Move Fast
****

Group: Member
Posts: 167
Joined: Aug 2005
Member No: 192,635



QUOTE(SinfullySweet @ Oct 16 2007, 05:37 PM) *
In your div coding, change the
CODE
left:0%;

to
CODE
left:50%


The reason your div is mis aligned on other computers, is because you have your divs set to left:0%, which will make all your divs uncentered, and will not move when you adjust the width of your browser.

By changing your left:0's to 50's, it will center your divs, making your profile appear the same on all screen resolutions.


My div coding for my Image is set to 0%, do you want me to change my content coding to zero?

Here's my coding for the first div content:

CODE
<div class="content" style="position: absolute; left:325px; top:335px; width:620px; height:235px; overflow: auto; z-index:4;">

contenttextpicture blablaha;dslkfja;sldkjf;asldf

</div>


And Here's the coding for my second:

CODE

<div class="content" style="position: absolute; left:325px; top:600px; width:620px; height:210px; overflow: auto; z-index:4;">

contentpicturestext blah a;sdlkfj;alsd

</div>
 
Unfold
post Oct 16 2007, 05:54 PM
Post #4


Always Move Fast
****

Group: Member
Posts: 167
Joined: Aug 2005
Member No: 192,635



QUOTE(digitalfragrance @ Oct 16 2007, 05:36 PM) *
What resolution and browser are you using? It looks fine on my computer (internet explorer) and my resolution is large.


I'm viewing this on Firefox and my resolution is 1,280x768
 
Unfold
post Oct 16 2007, 06:03 PM
Post #5


Always Move Fast
****

Group: Member
Posts: 167
Joined: Aug 2005
Member No: 192,635



QUOTE(SinfullySweet @ Oct 16 2007, 05:49 PM) *
No, DO not change your image cofing. Only change your content to 50%. 50% will make your divs centered on ALL screen resolutions. You only use 0% if you are making a div all the way on the left of the screen.

Change left:545px; to left:50%

And, use margin-left:##px to position your div. Margin-left acts exactly the same as left


Ok so I've changed the left:325px to left:50% and everything moved way far from where it's supposed to be.

And sorry for the much confusion, but where should I put the margin-left:##px ?

My coding now looks like this:

CODE
<div class="content" style="position: absolute; left:50%; top:335px; width:620px; height:235px; overflow: auto; z-index:4;">

CONTENT

</div>

 
Insurmountable
post Oct 17 2007, 11:41 AM
Post #6


Cornflakes :D
*******

Group: Staff Alumni
Posts: 4,541
Joined: Dec 2005
Member No: 322,923



To add the margin-left use this code now:

CODE
<div class="content" style="position: absolute; left:50%; top:335px; width:620px; height:235px; margin-left:##px; overflow: auto; z-index:4;">

CONTENT

</div>


Change the ## :]
 
Unfold
post Oct 17 2007, 02:56 PM
Post #7


Always Move Fast
****

Group: Member
Posts: 167
Joined: Aug 2005
Member No: 192,635



Thank you very much! It worked on my laptop and my mothers laptop. Let me know if it isn't aligned on yours.

So from now on, I add the left: 50% and the margin-left:##px to my content on any new div I'm building?
 
Insurmountable
post Oct 17 2007, 02:58 PM
Post #8


Cornflakes :D
*******

Group: Staff Alumni
Posts: 4,541
Joined: Dec 2005
Member No: 322,923



^Yep, should work thumbsup.gif


looks perfect on my computer too _smile.gif


Topic closed? Or do you have any other questions?
 
Unfold
post Oct 17 2007, 03:02 PM
Post #9


Always Move Fast
****

Group: Member
Posts: 167
Joined: Aug 2005
Member No: 192,635



Nope! _smile.gif You can close the topic
 
Insurmountable
post Oct 17 2007, 03:02 PM
Post #10


Cornflakes :D
*******

Group: Staff Alumni
Posts: 4,541
Joined: Dec 2005
Member No: 322,923



kk _smile.gif

Topic closed,
have a great day!

Have any other questions feel free to make a new topic.
 

Closed TopicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members: